Why is it throwing Uncaught TypeError: addEventListener is not a function?

• 0

  var squaresEl = document.querySelectorAll('.square');
  
      squaresEl.addEventListener('click', function () {
          console.log(123);
      });

  
  
  

  <div class="gameboard">
          <div class="div1 square"></div>
          <div class="div2 square"></div>
          <div class="div3 square"></div>
      </div>
      <div class="gameboard">
          <div class="div4 square"></div>
          <div class="div5 square"></div>
          <div class="div6 square"></div>
      </div>
          <div class="gameboard">
          <div class="div7 square"></div>
          <div class="div8 square"></div>
          <div class="div9 square"></div>
      </div>

  JavaScript Anonymous, Feb 11, 2020

---

1 Answers
• 0
  document.querySelectorAll returns NodeList , not the DOM element itself
  
  You need to refer to the elements by index.
  
  squaresEl [index] .addEventListener (...)

  Lukas Herring

---