使用具有 onclick 事件的按钮向按钮添加 onclick 事件？答案

【问题标题】：Adding an onclick event to a button with a button that has an onclick event?使用具有 onclick 事件的按钮向按钮添加 onclick 事件？
【发布时间】：2018-01-09 01:33:16
【问题描述】：

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

我可以在 w3schools.com 上做这个小例子，代码如下：

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

预期的功能是，在“触发”之前单击“尝试”按钮时，没有任何反应，只有在单击“触发”后，“尝试”按钮才会起作用。问题是当我单击“触发器”时，它实际上运行了应该通过单击“尝试”按钮执行的功能。

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

【问题讨论】：

标签： javascript html onclick

【解决方案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>

【讨论】：

哇，真快！谢谢！如果我想通过函数传递一个参数，比如 addfunc(x,y)，以便 displayDate 可以使用它们怎么办？
@JuanSolana 更新了我的答案。
@SURESHATTA 谢谢！那行得通！我一直使用 .onclick 并使用了您的 .addEventListener 建议的正确部分！

【解决方案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>

【讨论】：