JavaScript для цикла, который ничего не возвращает (не запущен)?

#javascript #html #for-loop

#javascript #HTML #для цикла

Вопрос:

Итак, у меня есть этот цикл for в теге script на моей странице EJS. Текущий код выглядит так:

 <script async>
    var removeCartItemButtons = document.getElementsByClassName('btn-danger')
    console.log(removeCartItemButtons)
    var i;
    for (i = 0; i < removeCartItemButtons.length; i  ){
        console.log('elem')
        var button = removeCartItemButtons[i]
        button.addEventListener('click', function() {
            console.log('clicked')
        })
    }
</script>
  

Консоль.журнал для removeCartItemButtons работает, но console.log(‘elem’) не запускается. Ни в моем cmd, ни в инструментах разработчика нет ошибок. Я просматривал онлайн на разных форумах, чтобы найти людей, которые делают со мной похожие вещи, и они работают нормально.

Я пробовал несколько вещей, и дополнительное уведомление заключается в том, что это внутри html-файла, а не внешнего.

Конечная цель этого цикла for — перебирать каждый элемент с классом ‘btn-danger’ и регистрировать его при нажатии. Любая помощь была бы потрясающей!

Комментарии:

1. Привет, может быть, список пуст?

2. Я подтвердил, что список не был пустым, записав в консоль removeCartItemButtons . Это вернуло HTMLCollection с 2 кнопками внутри.

3. @AviaHumble проверьте и запустите фрагмент кода в моем ответе

Ответ №1:

попробуйте запустить document.getElementsByClassName(‘btn-danger’) в консоли.

Дополнительный совет: в js есть цикл for of

проверьте это: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for…of в основном:

 for(let button of removeCartItemButtons) {
     button.addListener
}
  

Комментарии:

1. Я попробую это сейчас.

2. пробовал этот способ и все еще не работал, и подтвердил, что на моей странице есть 2 кнопки, которые могут работать с ним в качестве консоли, регистрирующей document.get… работает и показывает оба элемента.

Ответ №2:

Я попробовал этот код в Codepen, и он сработал. Я переписываю ваш код, но технически просто использовал другой синтаксис. «асинхронность» в вашем теге script может вызвать проблему, я не могу быть уверен.

 var buttons = document.querySelectorAll('.btn-danger');
[...buttons].forEach(button => {
  console.log('elem')
  button.addEventListener('click', function() {
    console.log('clicked')
  })
})
  

Ответ №3:

Должно быть, проблема с вашим HTML-кодом. Запустите фрагмент ниже, он работает нормально

 var removeCartItemButtons = document.getElementsByClassName('btn-danger')
console.log(removeCartItemButtons)
var i;
for (i = 0; i < removeCartItemButtons.length; i  ) {
  console.log('elem')
  var button = removeCartItemButtons[i]
  button.addEventListener('click', function() {
    console.log('clicked');
    alert('clicked');
  })
}  
 <button class='btn-danger'>Button</button>
<br/>
<button class='btn-danger'>Button</button>
<br/>
<button class='btn-danger'>Button</button>
<br/>
<button class='btn-danger'>Button</button>  

Комментарии:

1. Хм, у меня все еще не работает. Я забыл добавить, что на моей веб-странице есть bootstrap, и я знаю, что для начальной загрузки требуются такие вещи, как jQuery. Я не разбираюсь в Bootstrap, поэтому не уверен, что это так?

2. @AviaHumble Bootstrap не повлияет на выбор элементов button по classname, можете ли вы поделиться своим HTML-кодом в своем вопросе?

3. Ах, это исправлено. Похоже, ему не понравился файл EJS, в котором я его запускал, поэтому я попробовал другой файл, и он сработал. Теперь все исправлено.

4. Рад узнать, что Avia (y)

Ответ №4:

removeCartItemButtons.length равно 0, потому что при запуске фрагмента DOM не был полностью загружен.

Удалите async и поместите свой скрипт в конец вашего html.

Другой вариант — использовать EventListener, например onload , чтобы убедиться, что ваши кнопки существуют, прежде чем их менять.