Question

在这种情况下，我定义了点击功能来显示简单的两种形式。

帮助我

如何在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>";
}

Answer 1

在你的身体元素上：

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

MDN says：

<强>的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>

Answer 2

<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>

onclick函数之前的Javascript显示形式也是如此

2 个答案: