#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
, чтобы убедиться, что ваши кнопки существуют, прежде чем их менять.