Почему addEventListener возвращается как не функция

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

Надеюсь это поможет.

---

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

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

Answer 2

Переменная 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);
    });
  }
})

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