addeventlistener для индексированного элемента

Question

У меня есть список элементов. Однако длина этого списка варьируется в зависимости от испытания. Например, иногда есть 6 элементов, а иногда - 8. Точное количество подробно указано во внешних метаданных.

Чтобы отобразить этот список переменных, я написал:

var html = '';
html += '<div id="button' + ind + '" class="buttons">';
html += '<p>' + name + '</p></div>';
display_element.innerHTML = html;

Если бы я «проверял» элементы в моем браузере, они бы имели ID s из button0.buttons, button1.buttons, et c.

Сейчас я пытаюсь прикрепить слушателей событий к каждому элементу, но мой код пока не работает. Различные формы неработающего кода ниже:

document.getElementById("button' + ind + '").addEventListener("click", foo);
$("#button' + ind + '").click(foo);

document.getElementById("button").addEventListener("click", foo);
$("#button").click(foo);

Любая помощь будет очень признательна! Спасибо.

Answer 1

Вы ошиблись в строке concat, обновите ее как

document.getElementById("button" + ind).addEventListener("click", foo);

var html = '';
var ind = 1;
var display_element = document.getElementById("test");
html += '<div id="button' + ind + '" class="buttons">';
html += '<p>' + name + '</p></div>';
display_element.innerHTML = html;


document.getElementById("button" + ind).addEventListener("click", foo);

function foo(){
alert('click');
}

<div id="test"></div>

Answer 2

Чтобы ответить на вопрос, почему ни одно из этих применений document.getElementById() не работает для вас, вы неправильно смешиваете свои цитаты. "button' + ind '" вычисляет именно это, а не вычисляет "button0", "button1", et c. Чтобы сделать ваш код более читабельным и избежать подобных проблем со смешиванием цитат, я бы рекомендовал изучить литералы шаблонов https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Answer 3

В современном JS, если вы хотите выполнить ту же функцию, вам не нужно добавлять идентификатор к каждой кнопке. Просто используйте класс, добавленный к кнопкам, например:

    document.querySelectorAll('.buttons').forEach(button => {
      button.addEventListener('click',foo);
    });

Затем используйте параметр события в этой функции, чтобы получить целевой узел и выполнить все, что вы хотите. Вы также можете добавить атрибуты данных в эти кнопки, чтобы использовать их при выполнении этой функции.

Answer 4

Используйте «document.getElementsByClassName», чтобы получить все элементы botton, затем foreach, чтобы добавить функцию щелчка.

document.getElementsByClassName('buttons').map( element => { element.addEventListener("click", foo) })