Почему event listener работает только на последней кнопке?
let addMessage = document.querySelector(".todo_text"); let addButton = document.querySelector(".todo_add"); let dealsList = document.querySelector(".todo_items"); let deals = []; addButton.addEventListener('click',()=>{ let deal = addMessage.value; addMessage.value = ""; deals.push(deal); displayDeals(); }); function displayDeals(){ dealsList.innerHTML = ""; for(let i = 0;i<deals.length;i++){ let displayDeal = `<li class = "item_${i}"> <label>${deals[i]}</label> <button class = "del_button">X</button> </li>`; dealsList.innerHTML+=displayDeal; let el = document.querySelector(`.item_${i} .del_button`); console.log(el); el.addEventListener('click',()=>{ deals.splice(i,1); displayDeals(); }); } } |
let addMessage = document.querySelector(".todo_text"); let addButton = document.querySelector(".todo_add"); let dealsList = document.querySelector(".todo_items"); let deals = []; addButton.addEventListener('click',()=>{ let deal = addMessage.value; addMessage.value = ""; deals.push(deal); displayDeals(); }); function displayDeals(){ dealsList.innerHTML = ""; for(let i = 0;i<deals.length;i++){ let displayDeal = `<li class = "item_${i}"> <label>${deals[i]}</label> <button class = "del_button">X</button> </li>`; dealsList.innerHTML+=displayDeal; let el = document.querySelector(`.item_${i} .del_button`); console.log(el); el.addEventListener('click',()=>{ deals.splice(i,1); displayDeals(); }); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href = "./css/style.css" rel = "stylesheet"></link> <script defer src="./script.js"></script> <title>let`s deal!</title> </head> <body> <div class="topmenu-container"> <ul class="topmenu"> <li><a href="#deal-wheel">Главная</a></li> <li><a href="#help">Помощь</a></li> <li><a href="#auth">Вход</a></li> </ul> </div> <div class="content"> <h3 id="deal-wheel">Список выбора</h3> <div class="todo"> <div class="todo_input"> <input class="todo_text" type="text"> <button class="todo_add">Добавить</button> </div> <ul class="todo_items"></ul> </div> <div class = "result"> <input class="result_text" type="text"> <button class="getDeal">Рандом!</button> </div> <h3 id="help">Помощь</h3> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href = "./css/style.css" rel = "stylesheet"></link> <script defer src="./script.js"></script> <title>let`s deal!</title> </head> <body> <div class="topmenu-container"> <ul class="topmenu"> <li><a href="#deal-wheel">Главная</a></li> <li><a href="#help">Помощь</a></li> <li><a href="#auth">Вход</a></li> </ul> </div> <div class="content"> <h3 id="deal-wheel">Список выбора</h3> <div class="todo"> <div class="todo_input"> <input class="todo_text" type="text"> <button class="todo_add">Добавить</button> </div> <ul class="todo_items"></ul> </div> <div class = "result"> <input class="result_text" type="text"> <button class="getDeal">Рандом!</button> </div> <h3 id="help">Помощь</h3> </body> </html>
Дополнительно:
Скорее всего вот такой способ добавления элементов dealsList.innerHTML+=displayDeal;
сбрасывает обработчики на ранее добавленных элементах.
Попробуйте в одном цикле сформировать нужный html, а затем во втором навесить обработчики. Или добавлять разметку через методы работы с DOM, типа appendChild() и т.п.
Почему после добавления нового блока слетают события со всех остальных?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема заключается в том, что при добавлении event listener на несколько кнопок, он работает только на последней кнопке. Это происходит из-за того, что при каждой итерации цикла добавляется новый event listener на каждую кнопку, и при этом ссылка на предыдущий event listener затирается.
Для того чтобы исправить эту проблему, нужно использовать замыкание (closure) для сохранения контекста текущей кнопки. Вот пример кода на JavaScript, который показывает как это можно сделать:
var buttons = document.querySelectorAll('.button'); buttons.forEach(function(button) { button.addEventListener('click', function() { console.log('Button clicked: ' + button.textContent); }); });
В этом примере мы используем forEach для итерации по всем кнопкам и добавляем event listener на каждую кнопку. При этом мы используем closure для сохранения контекста текущей кнопки внутри обработчика события.
Теперь при клике на любую кнопку будет выводиться текст этой кнопки, и это будет работать для всех кнопок, а не только для последней.
Надеюсь, это поможет вам разобраться с проблемой и исправить её. Если у вас есть дополнительные вопросы, не стесняйтесь задавать.