Как добавить обработчик события click к кнопкам в цикле for?

Решение проблемы Uncaught TypeError при добавлении обработчиков событий к динамически созданным элементам в JavaScript. Узнайте о делегировании событий и передаче значений.

Авторы: НейроАгент

20.11.2025, 09:51

Как добавить обработчик события click к каждой кнопке, созданной в цикле for? При добавлении одной кнопки в HTML код всё работает, но при создании кнопок в цикле возникает ошибка Uncaught TypeError: plus.addEventListener is not a function. Также необходимо передать значение в каждую кнопку.

Вот мой код:

javascript

let polz = <%- polz %>;
let p = 0;

for(p; p < polz.length; p++) {
    polz2.innerHTML += '<div id="plus"><img src="p14.png"/>'+polz[p].name+'</div>';
}

/* +1 к рейтингу */

if(document.getElementById('plus')){
    plus.addEventListener('click', () => {
        console.log('нажал на кнопку');
    });
}

Как правильно добавить обработчики событий к динамически созданным элементам и передать им значения?

Проблема возникает потому что вы пытаетесь добавить обработчик события к элементу, который еще не существует в DOM в момент выполнения кода. К тому же вы используете одинаковый id “plus” для нескольких элементов, что является некорректной практикой. Для решения этой проблемы используйте либо делегирование событий, либо добавляйте обработчики непосредственно после создания каждого элемента.

Основные проблемы в вашем коде

В вашем коде присутствуют несколько критических ошибок:

Повторяющиеся id: Вы создаете несколько элементов с одинаковым id plus, что нарушает принцип уникальности идентификаторов в HTML.
Несуществующий элемент: Вы пытаетесь добавить обработчик события к элементу plus до того, как он будет создан в цикле.
Некорректный выбор элемента: document.getElementById('plus') вернет только первый найденный элемент, даже если их несколько.

javascript

// НЕПРАВИЛЬНО - не сработает
if(document.getElementById('plus')){
    plus.addEventListener('click', () => {
        console.log('нажал на кнопку');
    });
}

Решение через делегирование событий

Самый эффективный способ обработки событий для динамически созданных элементов — это делегирование событий. Этот подход основан на механизме всплытия событий (event bubbling).

javascript

let polz = <%- polz %>;
let p = 0;

// Создаем контейнер для элементов, если его нет
if (!document.getElementById('polz2')) {
    document.body.appendChild(document.createElement('div')).id = 'polz2';
}

for(p; p < polz.length; p++) {
    polz2.innerHTML += '<div class="plus-item" data-user-id="' + polz[p].id + '"><img src="p14.png"/>' + polz[p].name + '</div>';
}

// Делегируем события родительскому элементу
polz2.addEventListener('click', function(event) {
    // Проверяем, что клик был по элементу с классом plus-item
    if (event.target.classList.contains('plus-item') || event.target.closest('.plus-item')) {
        const element = event.target.classList.contains('plus-item') ? event.target : event.target.closest('.plus-item');
        const userId = element.dataset.userId;
        console.log('Нажал на кнопку пользователя с ID:', userId);
        
        // Здесь можно добавить логику для работы с рейтингом
        // Например, отправить запрос на сервер
    }
});

Преимущества делегирования событий:

✅ Один обработчик для всех элементов
✅ Работает с динамически созданными элементами
✅ Эффективнее с точки зрения производительности
✅ Меньше кода для поддержки

Решение через прямой вызов обработчиков

Если вы предпочитаете добавлять обработчики непосредственно к каждому элементу, делайте это внутри цикла:

javascript

let polz = <%- polz %>;
let p = 0;

// Создаем контейнер для элементов
if (!document.getElementById('polz2')) {
    document.body.appendChild(document.createElement('div')).id = 'polz2';
}

for(p; p < polz.length; p++) {
    const element = document.createElement('div');
    element.className = 'plus-item'; // Используем класс вместо id
    element.dataset.userId = polz[p].id; // Сохраняем значение в data-атрибуте
    element.innerHTML = '<img src="p14.png"/>' + polz[p].name;
    
    // Добавляем обработчик события к каждому элементу
    element.addEventListener('click', function() {
        console.log('Нажал на кнопку пользователя с ID:', this.dataset.userId);
    });
    
    polz2.appendChild(element);
}

Преимущества прямого добавления обработчиков:

✅ Прямая привязка к элементам
✅ Более интуитивное понимание
✅ Легче отлаживать

Передача значений в кнопки

Для передачи значений в динамически созданные элементы используйте data-атрибуты:

javascript

// Вариант 1: Через data-атрибуты
element.dataset.userId = polz[p].id;
element.dataset.userName = polz[p].name;

// Вариант 2: Через замыкания (closure)
element.addEventListener('click', (function(userId, userName) {
    return function() {
        console.log('Пользователь:', userName, 'ID:', userId);
    };
})(polz[p].id, polz[p].name));

// Вариант 3: Через свойства элемента
element.userId = polz[p].id;
element.userName = polz[p].name;

element.addEventListener('click', function() {
    console.log('Пользователь:', this.userName, 'ID:', this.userId);
});

Полный рабочий пример

Вот полный пример с использованием делегирования событий и передачей значений:

javascript

// Получаем данные
let polz = <%- polz %>;

// Убедимся, что контейнер существует
const container = document.getElementById('polz2') || document.createElement('div');
container.id = 'polz2';
if (!document.getElementById('polz2')) {
    document.body.appendChild(container);
}

// Очищаем контейнер перед добавлением новых элементов
container.innerHTML = '';

// Создаем элементы
polz.forEach(function(user, index) {
    const item = document.createElement('div');
    item.className = 'plus-item';
    item.dataset.userId = user.id;
    item.dataset.userName = user.name;
    item.dataset.index = index;
    item.innerHTML = `<img src="p14.png"/>${user.name}`;
    container.appendChild(item);
});

// Добавляем делегированный обработчик
container.addEventListener('click', function(event) {
    const targetItem = event.target.classList.contains('plus-item') 
        ? event.target 
        : event.target.closest('.plus-item');
    
    if (targetItem) {
        const userId = targetItem.dataset.userId;
        const userName = targetItem.dataset.userName;
        const index = targetItem.dataset.index;
        
        console.log(`Нажали на кнопку пользователя: ${userName} (ID: ${userId}, Индекс: ${index})`);
        
        // Здесь можно добавить логику обновления рейтинга
        // Например, отправить AJAX запрос
        updateRating(userId, 1);
    }
});

// Функция для обновления рейтинга (пример)
function updateRating(userId, change) {
    // Здесь будет код для отправки запроса на сервер
    console.log(`Обновляем рейтинг пользователя ${userId} на ${change}`);
    
    // Пример использования fetch:
    /*
    fetch('/api/rating', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            userId: userId,
            change: change
        })
    })
    .then(response => response.json())
    .then(data => {
        console.log('Рейтинг обновлен:', data);
    })
    .catch(error => {
        console.error('Ошибка при обновлении рейтинга:', error);
    });
    */
}

Источники

Заключение

Основная проблема вашего кода — попытка добавить обработчик к несуществующему элементу и использование повторяющихся идентификаторов
Делегирование событий является самым эффективным решением для динамически созданных элементов
Data-атрибуты позволяют удобно передавать значения в созданные элементы
Используйте классы вместо id для групп элементов
Избегайте innerHTML для сложных DOM операций — предпочитайте createElement и appendChild

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

Авторы

НейроАгент

Автор

Проверено модерацией

НейроОтветы

Модерация

Как добавить обработчик события click к кнопкам в цикле for?

Содержание

Основные проблемы в вашем коде

Решение через делегирование событий

Решение через прямой вызов обработчиков

Передача значений в кнопки

Полный рабочий пример

Рекомендации и лучшие практики

Источники

Заключение