Javascript在onclick函数之前显示表单

Javascript display form before onclick function also

本文关键字：显示 表单 函数 onclick Javascript      更新时间：2023-09-26

在本例中，我定义了on-click函数来显示简单的两个表单。

如何总是在onclick函数之前显示第一个表单(displayRed函数表单)

<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>";
}

关于body元素:

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

MDN说:

onload
当文档加载完成时调用的函数。

因此，通过将onload属性添加到body元素，您可以在页面加载后立即执行该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>

<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>
相关文章：