Проблема с addEventListener

Question

Итак, я применяю свои последние знания Javascript и DOM.Однако при попытке использовать querySelectorAll или getElementsByClassName для одной и той же кнопки, но для разных вопросов, появляется сообщение об ошибке «addEventListener не определено».Вот мой блок кода.

var input = document.getElementsByClassName('userInput');
var submitButton = document.getElementsByClassName('.submit');
var numAnsCorrect = 0;
var numAnsIncorrect = 0;
var questionsRight = document.querySelector('.questionsRight');
var questionsWrong = document.querySelector('.questionsWrong');


submitButton.addEventListener('click', () => {
    let submitButton = document.querySelector('.submit');
    let userInput = document.querySelector('.userInput');
    let response = userInput.value;
    response = response.toUpperCase();
    var answer = ['SAVANNAH', 'NATHAN DEAL'];
    let result = document.querySelector('.question-result');
    for (var i = 0; i < answer.length; i++) {
        if (response === answer[i]) {
            result.textContent += ' That is correct!';
            numAnsCorrect++;
            questionsRight.textContent = numAnsCorrect;
            submitButton.style.display = "none";
        } else {
            result.textContent += ' That is incorrect';
            numAnsIncorrect++;
            questionsWrong.textContent = numAnsIncorrect;
            submitButton.style.display = "none";
        }
    }
});

Что я делаю не так?Я предполагал, что мне придется перебирать кнопки или, возможно, использовать другой оператор равенства для кнопки, но я не слишком уверен.

Answer 1

У меня есть эта проблема раньше.Попробуйте console.log на submitButton .Но лучше всего получить элемент DOM в некоторых случаях с помощью getElementsById.Или используйте JQuery для продвинутых целей.

Answer 2

Нельзя быть на 100% уверенным в том, что не так с кодом OP, поскольку HTML не предоставляется, , но Я могу с уверенностью предположить, что существует ряд элементов, которые вы хотите прослушивать для событий.Есть несколько способов достичь вашей цели:

1. Используйте цикл или метод массива для итерации по нескольким элементам. В каждом цикле назначьте обработчик события для текущего элемента.

   for (let i=0; i < list.length; i++) {
     list[i].addEventListener('click', eventHandler);
   } 
   

2. Назначьте для атрибута события каждому элементу.

   <button onclick='eventHandler()'>CLICK</button>
   <button onclick='eventHandler()'>CLICK</button>
   

3. Делегирование события - это шаблон, использующий преимущества Bubbling Event и объект события .В основном, если есть группа элементов, которые нам нужно прослушивать для событий, мы просто назначаем один eventListener элементу-предку, который объединяет группу элементов (мы можем даже использовать document или window.) При этом наши ресурсы не связаны в нескольких событиях EventHandlers / eventListeners, и мы не получаем, чтобы Carpal Tunnel Syndrome набрал 100 событий onclick. ⭐ Рекомендуется

---

Демонстрация 1

Регистрация eventHamdlers / eventListeners на каждой итерации NodeList или массива

---

/* Collect all .btn class in a NodeList then convert it into
|| an array
*/
var btnArray = Array.from(document.querySelectorAll('.btn'));

// Reference the output.out
var out = document.querySelector('.out');

/* run arry through forEach() array method...
|| on each loop assign an onclick eventHandler or eventListener to
|| current button.btn
*/
btnArray.forEach(function(btn, idx) {

  btn.addEventListener('click', function() {

    var txt = btn.textContent;

    out.textContent = txt;
    
  });

});

.out,
button {
  display: inline-block;
  color: blue;
  font: 900 20px/1 Consolas;
  width: 5ch;
  text-align: center;
}

.out {
  color: red;
  width: 100%;
  font-size: 30px
}

<fieldset class='set'>
  <button class='btn'>BTN0</button>
  <button class='btn'>BTN1</button>
  <button class='btn'>BTN2</button>
  <button class='btn'>BTN3</button>
  <button class='btn'>BTN4</button>
  <button class='btn'>BTN5</button>
  <button class='btn'>BTN6</button>
  <button class='btn'>BTN7</button>
  <button class='btn'>BTN8</button>
  <button class='btn'>BTN9</button>
  <button class='btn'>BTNA</button>
  <button class='btn'>BTNB</button>
  <button class='btn'>BTNC</button>
  <button class='btn'>BTND</button>
  <button class='btn'>BTNE</button>
  <button class='btn'>BTNF</button>
  <output class='out'>X</output>
</fieldset>

---

Демонстрация 2

Назначение атрибута события on для каждого элемента

---

var out = document.querySelector('.out');

function eventHandler(event) {
  var txt = event.target.textContent;
  out.value = txt;
}

.out,
button {
  display: inline-block;
  color: blue;
  font: 900 20px/1 Consolas;
  width: 5ch;
  text-align: center;
}

.out {
  color: red;
  width: 100%;
  font-size: 30px
}

<fieldset class='set'>
  <button class='btn' onclick="eventHandler(event,this)">BTN0</button>
  <button class='btn' onclick="eventHandler(event,this)">BTN1</button>
  <button class='btn' onclick="eventHandler(event,this)">BTN2</button>
  <button class='btn' onclick="eventHandler(event,this)">BTN3</button>
  <button class='btn' onclick="eventHandler(event,his)">BTN4</button>
  <button class='btn' onclick="eventHandler(event,this)">BTN5</button>
  <button class='btn' onclick="eventHandler(event,this)">BTN6</button>
  <button class='btn' onclick="eventHandler(event,this)">BTN7</button>
  <button class='btn' onclick="eventHandler(event,this)">BTN8</button>
  <button class='btn' onclick="eventHandler(event,this)">BTN9</button>
  <button class='btn' onclick="eventHandler(event,this)">BTNA</button>
  <button class='btn' onclick="eventHandler(event,this)">BTNB</button>
  <button class='btn' onclick="eventHandler(event,this)">BTNC</button>
  <button class='btn' onclick="eventHandler(event,this)">BTND</button>
  <button class='btn' onclick="eventHandler(event,this)">BTNE</button>
  <button class='btn' onclick="eventHandler(event,this)">BTNF</button>
  <output class='out'>X</output>
</fieldset>

---

Демонстрация 3

Делегирование события

Подробностипрокомментировал в демоверсии

⭐ Рекомендуется

---

// Reference the parent element
var set = document.querySelector('.set');

/* Register parent to click event it will trigger not only when 
|| it is clicked, it will also trigger callback if any of ts 
|| descebdant elements are clicked as well.
*/
set.addEventListener('click', eventHandler);

// Callback function passes the Event Object
function eventHandler(even) {

  // Reference an output.out
  var out = document.querySelector('.out');

  // if the clicked element (event.target) has the class .btn...
  if (event.target.className === "btn") {

    // ...Get event.target's text
    var txt = event.target.textContent;

    // Display the text
    out.value = txt;
  }

  return false;

};

.out,
button {
  display: inline-block;
  color: blue;
  font: 900 20px/1 Consolas;
  width: 5ch;
  text-align: center;
}

.out {
  color: red;
  width: 100%;
  font-size: 30px
}

<fieldset class='set'>
  <button class='btn'>BTN0</button>
  <button class='btn'>BTN1</button>
  <button class='btn'>BTN2</button>
  <button class='btn'>BTN3</button>
  <button class='btn'>BTN4</button>
  <button class='btn'>BTN5</button>
  <button class='btn'>BTN6</button>
  <button class='btn'>BTN7</button>
  <button class='btn'>BTN8</button>
  <button class='btn'>BTN9</button>
  <button class='btn'>BTNA</button>
  <button class='btn'>BTNB</button>
  <button class='btn'>BTNC</button>
  <button class='btn'>BTND</button>
  <button class='btn'>BTNE</button>
  <button class='btn'>BTNF</button>
  <output class='out'>X</output>
</fieldset>

Answer 3

Когда вы используете querySelectorAll() или getElementsByClassName(), вы получаете список элементов обратно.Вам нужно вытащить элемент из этого списка, чтобы иметь возможность вызывать addEventListener() для него.

пример:

var userInputs = document.getElementsByClassName('userInput');
var input = userInputs[0];