как только я добавляю группу динамических кнопок из массива, а querySelectorAll, похоже, не получает список кнопок. Вот мой код: Где я ошибаюсь?
const btns = document.getElementById("container");
const textBtn = ["btn 1", "btn 2", "btn 3", "btn 4", "btn 5", "btn 6"]
for (i = 0; i < textBtn.length; i++) {
btns.insertAdjacentHTML('beforeend', `<button class = "allbuttons" value=${textBtn[i]}>${textBtn[i]}</button>`);
}
const btn = document.querySelectorAll(".allbuttons")
for (var i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', function(event) {
//console.info( btn[i]);
console.info(event.target.value);
alert(event.target.value)
});
}
<div id = "container"></div>
@ Эммануэль Демей, извините за беспорядок, это мой первый пост, и я немного растерялся, но я отредактировал пост
Я добавил ваш код во фрагмент. Вы можете отредактировать свой пост и нажать «редактировать приведенный выше фрагмент», потому что в вашем коде отсутствуют кнопки. Нет элементов, которые имеют класс .allbuttons
.
Спасибо за руководство, я уже вставил недостающую часть, но я не могу получить значение соответствующей кнопки, я получаю только «btn», а не соответствующий
@MauricioRios Щелкните правой кнопкой мыши одну из кнопок и выберите «Проверить» и посмотрите, где находятся числа. Вам нужно заключить свой класс в «кавычки», потому что у вас есть пробел между btn и числом, а число будет атрибутом, а не частью класса.
Пользуясь случаем, у меня еще один вопрос. Как изменить цвет фона нажатой кнопки? Я попробовал это, но получил ошибку: btn[i].style.background = "#ff5353"
это помогает? это то что тебе нужно?
const btns = document.getElementById("container");
const textBtn = ["btn 1", "btn 2", "btn 3", "btn 4", "btn 5", "btn 6"]
for (i = 0; i < textBtn.length; i++) {
btns.insertAdjacentHTML('beforeend', `<input type = "button" class = "allbuttons" value = "${textBtn[i]}">`);
}
const btn = document.querySelectorAll(".allbuttons")
for (var i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', function(event) {
console.info(event.target.value);
alert(event.target.value)
});
}
<div id = "container"></div>
Ваша проблема может исходить из этого:
<button class = "allbuttons" value=${textBtn[i]}>${textBtn[i]}</button>
Ваше значение не в кавычках <button class = "allbuttons" value = "${textBtn[i]}">${textBtn[i]}</button>
Я не уверен, что ваш код правильный. Где вы устанавливаете класс CSS .allbuttons? Я не вижу этого.