Question

我有2个按钮，其中一个有onclick事件，当点击时会调用一个函数，该函数应该将onclick事件处理程序添加到第二个按钮。

我能够在w3schools.com上做这个小例子，这里是代码：

＆＃13;

<!DOCTYPE html>
<html>
<body>

<p>Click "Try it" to execute the displayDate() function.</p>

<button id="myBtn2" onclick="addfunc();">Trigger</button>
<button id="myBtn">Try it</button>


<p id="demo"></p>

<script>
function addfunc(){
document.getElementById("myBtn").onclick = displayDate();
}

function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

＆＃13;

预期的功能是点击＆＃34;试试＆＃34;按钮之前＆＃34;触发＆＃34;，没有任何反应，只有在点击＆＃34;触发＆＃34; ＆＃34;试试＆＃34;按钮应该工作。问题是当我点击＆＃34;触发＆＃34;它实际上运行了它应该通过点击＆＃34;试试它＆＃34;执行的功能。按钮。

希望我自己解释一下，谢谢！

Answer 1

您应该使用displayDate代替displayDate()。因为displayDate（）直接调用函数。

<!DOCTYPE html>
<html>
<body>

<p>Click "Try it" to execute the displayDate() function.</p>

<button id="myBtn2" onclick="addfunc();">Trigger</button>
<button id="myBtn">Try it</button>


<p id="demo"></p>

<script>
function addfunc(){
document.getElementById("myBtn").onclick = displayDate;
}

function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

如果要传递变量

<!DOCTYPE html>
<html>
<body>

<p>Click "Try it" to execute the displayDate() function.</p>

<button id="myBtn2" onclick="addfunc();">Trigger</button>
<button id="myBtn">Try it</button>


<p id="demo"></p>

<script>
function addfunc(){
   
document.getElementById("myBtn").addEventListener('click', function(){
     displayDate("my params");
});
}

function displayDate(params) {
    document.getElementById("demo").innerHTML = Date() + " -- " + params;
}
</script>

</body>
</html>

Answer 2

您可以禁用第二个按钮（使用HTML代码），并使第一个按钮成为btn1的激活器

<body>
  <main>
    <input class="btn1" type="button" value="enable button 2" name="btn1" onclick="ableBtn2()">
    <button Id="btn2" onclick="displayDate()" disabled="true">button 2</button>

    <p id="test"></p>

    <script type="text/javascript">
      function ableBtn2() {
        document.getElementById("btn2").disabled = false;
      }
    </script>
    <script type="text/javascript">
      function displayDate() {
        document.getElementById("test").innerHTML = Date();
      }
    </script>
  </main>
</body>

使用具有onclick事件的按钮将onclick事件添加到按钮？

2 个答案: