JS код не срабатывает по событию

Question

Мне нужно проверять мой toggle (input type="checkbox") на состояние. Если checked, то рядом дописать слово "On", иначе "Off". Я проверяю это дважды: первый раз при загрузке страницы, дальше по клику. Есть такой код:

let toggles = document.querySelectorAll('.toggle');

function checkToggle(checkbox) {
  let checkboxContainer = checkbox.closest('.toggle-container');
  let flagMessage = checkboxContainer.querySelector('.flag-message');

  if (checkbox.checked) {
    flagMessage.textContent = "On";
  } else {
    flagMessage.textContent = "Off";
  }
}

toggles.forEach(toggle => toggle.addEventListener("DOMContentLoaded", checkToggle(toggle)));
toggles.forEach(toggle => toggle.addEventListener("click", checkToggle(toggle)));

Первый раз функция по событию "DOMContentLoaded" срабатывает. Второй раз по событию "click" не срабатывает. Где я ошибся?

Answer 1

Вы не назначаете обработчик события, а вызываете функцию прямо там; вторым параметром в addEventListener передается undefined.

toggles.forEach(toggle => toggle.addEventListener("DOMContentLoaded", () => checkToggle(toggle)));
toggles.forEach(toggle => toggle.addEventListener("click", () => checkToggle(toggle)));

Ошибка такая же, как и в JS-код неправильно добавляет классы

Обратите внимание на знак "галочка" слева от ответов на Ваши вопросы. Этот знак - для Вас.

БЛОГ НА HUSL

JS код не срабатывает по событию

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