2016-09-04 4 views
1

В этом случае я определил функцию щелчка, чтобы отобразить простую форму.Javascript display form before onclick function также

Помоги мне на

Как я могу всегда показывать первую форму (displayRed функция формы) до OnClick функции.

<button onclick="displayRed()" value="11">Red</button> 
<button onclick="displayBlue()" value="22">Blue</button> 
<div id="flight"></div> 

function displayRed() { 
    document.getElementById("flight").innerHTML = "<form> <input type='text' value='1'/> </form>"; 
} 

function displayBlue() { 
    document.getElementById("flight").innerHTML = "<form> <input type='text' value='2'/> </form>"; 
} 
+0

Создание '' displayRed' собственного invoke', не помогает? –

ответ

1

На вашем теле элемента:

<body onload="displayRed()"> 
    <!-- everything else ... 

MDN says:

OnLoad
Функция вызываемая при загрузке документа.

Таким образом, добавляя атрибут onload к элементу вашего тела, вы выполняете эту функцию javascript, как только загружается страница.

function displayRed() { 
 
    alert("Red!"); 
 
} 
 

 
function displayBlue() { 
 
    alert("Blue!"); 
 
}
<body onload="displayRed()"> 
 
    <button onclick="displayRed()" value="11">Red</button> 
 
    <button onclick="displayBlue()" value="22">Blue</button> 
 
    <div id="flight"></div> 
 
</body>

0
<button onclick="displayForm('red')" value="11">Red</button> 
<button onclick="displayForm('blue')" value="22">Blue</button> 
<div id="flight"> 
    <form id="myRedForm"><input type="text" value="red"></form> 
</div> 

<script> 
    var displayForm = (function(activeForm){ 
     var currentForm = activeForm; 
     var forms = { 
      red: '<form id="myRedForm"><input type="text" value="red"></form>', 
      blue: '<form id="myBlueForm"><input type="text" value="blue"></form>' 
     }; 
     return function (formType) { 
      if(formType !== activeForm) { 
       document.getElementById("flight").innerHTML = forms[formType]; 
       currentForm = formType; 
      } 
     } 
    })('red'); 
</script>