Question

我有一个简单的脚本试图在按钮上注册一个点击。但是，我不断收到错误*element*.addEventListener不是函数。

有谁能解释我做错了什么？

HTML

<div id="game">
    <canvas id="gameScreen" width="550" height="500"></canvas>
    <div id="output"><p></p></div>
    <div id="controls">
        <button id="north">North</button>
        <button id="east">East</button>
        <button id="west">West</button>
        <button id="south">South</button>
    </div>
</div>

JS

window.addEventListener("load", function(){
    var canvas = document.getElementById("gameScreen");
    var ctx = canvas.getContext("2d");
    var output = document.getElementById("output");
    var outputText = output.querySelector("p");
    var controls = document.getElementById("controls");
    var directionButtons = controls.getElementsByTagName("button");

    directionButtons.addEventListener("click", function(){
        console.log(this);
    })
})

错误

TypeError：directionButtons.addEventListener不是函数

Answer 1

getElementsByTagName() 方法将返回一个节点列表，您应该遍历它们并将侦听器附加到每个节点：

function my_click(){
   alert(this.id);
}

var directionButtons = controls.getElementsByTagName("button");

for(i=0; i<directionButtons.length; i++) {
    directionButtons[i].addEventListener("click", my_click, false);
}

希望这有帮助。

＆＃13;

function my_click(){
   alert(this.id);
}

var directionButtons = document.getElementsByTagName("button");

for(i=0; i<directionButtons.length; i++) {
    directionButtons[i].addEventListener("click", my_click, false);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='1'>Button 1</button>
<button id='2'>Button 2</button>
<button id='3'>Button 3</button>
<button id='4'>Button 4</button>

＆＃13;

Answer 2

变量width是一个包含多个元素的数组。你需要在这里使用循环来添加监听器。

directionButtons

window.addEventListener("load", function() {
  var canvas = document.getElementById("gameScreen");
  var ctx = canvas.getContext("2d");
  var output = document.getElementById("output");
  var outputText = output.querySelector("p");
  var controls = document.getElementById("controls");
  var directionButtons = controls.getElementsByTagName("button");
  for (i = 0; i < directionButtons.length; i++) {
    directionButtons[i].addEventListener("click", function() {
      console.log(this);
    });
  }
})

为什么addEventListener作为函数返回

2 个答案: