Question

这是我的代码。它使用JavaScript正确添加按钮，但事件侦听器无法按预期工作。无论我点击哪个按钮，文本区域中的输出始终为button100。好吧，按钮单击不会改变任何按钮的任何内容，这使我认为听众没有被正确添加。

<html>
    <head><title>Many buttons</title></head>

    <body id="theBody">
    <br><br>
    <textarea id="debugConsole" rows="4" cols="50"></textarea>
    <script type="text/javascript">

    for (var i = 1; i <= 100; i ++) {
        var button = document.createElement('input');
        button.type = "button";
        button.value = "button" + i;
        button.onclick = clickHandler(button);
        document.getElementById("theBody").appendChild(button);
    }

    function clickHandler(button) {
        console.log('clicked');
        var value = button.value;
        debugConsole.value = value;
    }


    </script>


    <body>

</html>

我不确定错误在哪里。 for循环不应该将clickHandler（）添加到所有按钮吗？

Answer 1

您的代码：

button.onclick = clickHandler(button);

没有为函数分配函数clickHandler，它正在分配调用clickHandler的返回值的结果。结果是undefined或null，因为函数没有显式返回。

这就是你需要的。

<html>
    <head><title>Many buttons</title></head>

    <body id="theBody">
    <br><br>
    <textarea id="debugConsole" rows="4" cols="50"></textarea>
    <script type="text/javascript">

    for (var i = 1; i <= 100; i ++) {
        var button = document.createElement('input');
        button.type = "button";
        button.value = "button" + i;
        button.onclick = clickHandler;
        document.getElementById("theBody").appendChild(button);
    }

    function clickHandler(event) {
        console.log('clicked');
        var value = event.target.value;
        debugConsole.value = value;
    }


    </script>


    <body>

</html>

我必须仔细检查event.target.value，但这是你需要的要点。

Answer 2

添加（）时正在执行clickHandler;你需要按名称指定回调：

button.onclick = clickHandler;

你总是可以通过传递（e）找到触发事件的元素，所以你的clickHandler应该这样做：

function clickHandler(e) {
  var originElement = e.target;
}

Answer 3

<html>
    <head><title>Many buttons</title></head>

    <body id="theBody">
    <br><br>
    <textarea id="debugConsole" rows="4" cols="50"></textarea>
    <script type="text/javascript">

    for (var i = 1; i <= 100; i ++) {
        var button = document.createElement('input');
        button.type = "button";
        button.value = "button" + i;
        button.onclick = clickHandler;
        document.getElementById("theBody").appendChild(button);
    }

    function clickHandler() {
        console.log(this.value);
        document.getElementById('debugConsole').value = this.value;
    }


    </script>


    <body>

</html>

Answer 4

onclick是一个函数，因此您应该传递值button.onclick = function而不是button.onclick = function(node)。

这是正确的方法

<强> HTML

<html>
    <head><title>Many buttons</title></head>

    <body id="theBody">
    <br><br>
    <textarea id="debugConsole" rows="4" cols="50"></textarea>
    <script type="text/javascript">

    for (var i = 1; i <= 100; i ++) {
        var button = document.createElement('input');
        button.type = "button";
        button.value = "button" + i;
        button.onclick = clickHandler;
        document.getElementById("theBody").appendChild(button);
    }

    function clickHandler(event) {
        document.getElementById('debugConsole').value = event.target.value;
    }


    </script>


    <body>

</html>

演示：

PLAYGROUND

如何在JavaScript中的许多按钮中添加事件监听器？

4 个答案: