Не могу решить ошибку Uncaught TypeError: plusButton.addEventListener is not a function

Question

Я не понимаю, почему у меня подобная ошибка, когда я делал все по видео уроку, все как у автора, и ошибка. Как вариант, попробовал через forEach, ошибка в браузере исчезает но код не работает. Несколько часов долблюсь.

let numberOne = document.querySelectorAll('.number-one');
let numberTwo = document.querySelectorAll('.number-two');

let plusButton = document.querySelectorAll('.plus');
let clearButton = document.querySelectorAll('.clear');

clearButton.forEach(function(clearBtn) {
  clearBtn.addEventListener('click', () => {
  numberOne.value = ''
  numberTwo.value = ''
  resultText.innerText = ''
  })
});
  


plusButton.addEventListener('click', () => {
let numOne = parseInt(numberOne.value)
let numTwo = parseInt(numberTwo.value)

let sum = numOne + numTwo

resultText.innerText = sum
});

HTML

    <body>
      <div class="wrapper">
        <!-- @import "header.html" -->
        <input type="number" class="number-one">
        <input type="number" class="number-two">
        <button class="plus">+</button>
        <button class="minus">-</button>
        <button class="divide">/</button>
        <button class="multiply">x</button>
        <button class="clear" type="button">Очистить</button>
    
        <p class="result"></p>
    
        <div class="slides"></div>
    
        
    
        <!-- @import "footer.html" -->
      </div>
    <script src="js/script.js"></script>
    </body>

Answer 1

Когда вам нужна коллекция элементов, чтобы перебрать её в forEach(), используйте document.querySelectorAll(). Когда вам нужен один элемент, используйте document.querySelector() (без All). Вы же используете метод получения коллекции везде, поэтому и получаете такую ошибку — ведь метод addEventListener() есть только у элементов, а не у их коллекций.

БЛОГ НА HUSL

Не могу решить ошибку Uncaught TypeError: plusButton.addEventListener is not a function

Ответы (1 шт):