Javascript 为什么addEventListener作为非函数返回

我有一个简单的脚本，试图注册一个按钮点击。但是，我不断得到错误

*元素*。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>

错误

TypeError:directionButtons.addEventListener不是函数

---

变量

directionButtons

是多个元素的数组。您需要在这里使用loop来添加侦听器

window.addEventListener（“加载”，函数（）{
var canvas=document.getElementById（“游戏屏幕”）；
var ctx=canvas.getContext（“2d”）；
var output=document.getElementById（“输出”）；
var outputText=output.querySelector（“p”）；
var controls=document.getElementById（“控件”）；
var directionButtons=controls.getElementsByTagName（“按钮”）；
对于（i=0；i

北
东边
西部
南方

方法将返回一个节点列表，您应该在其中循环并将侦听器连接到每个节点：

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);
}

功能我的鼠标点击（）{
警报（this.id）；
}
var directionButtons=controls.getElementsByTagName（“按钮”）；
对于（i=0；i）来说，由于您必须迭代添加单击事件-
方向按钮
是一个数组，我今天显然无法思考。谢谢，我今天显然无法思考。
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);
}