Получить соответствующее значение кнопки в цикле

как только я добавляю группу динамических кнопок из массива, а 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>

Я не уверен, что ваш код правильный. Где вы устанавливаете класс CSS .allbuttons? Я не вижу этого.

Emmanuel Demey 10.02.2023 16:05

@ Эммануэль Демей, извините за беспорядок, это мой первый пост, и я немного растерялся, но я отредактировал пост

Mauricio Rios 10.02.2023 16:36

Я добавил ваш код во фрагмент. Вы можете отредактировать свой пост и нажать «редактировать приведенный выше фрагмент», потому что в вашем коде отсутствуют кнопки. Нет элементов, которые имеют класс .allbuttons.

Rickard Elimää 10.02.2023 16:38

Спасибо за руководство, я уже вставил недостающую часть, но я не могу получить значение соответствующей кнопки, я получаю только «btn», а не соответствующий

Mauricio Rios 10.02.2023 16:45

@MauricioRios Щелкните правой кнопкой мыши одну из кнопок и выберите «Проверить» и посмотрите, где находятся числа. Вам нужно заключить свой класс в «кавычки», потому что у вас есть пробел между btn и числом, а число будет атрибутом, а не частью класса.

Rickard Elimää 10.02.2023 16:50

Пользуясь случаем, у меня еще один вопрос. Как изменить цвет фона нажатой кнопки? Я попробовал это, но получил ошибку: btn[i].style.background = "#ff5353"

Mauricio Rios 12.02.2023 04:22
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
6
86
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

это помогает? это то что тебе нужно?

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>

Другие вопросы по теме