The idea: when you click on the added items in the green list, they appear crossed out in the red list one at a time, and it turns out that the same list item appears several times. 1. Why does this happen if an event should occur on this? 2. How to fix it ??

let input = document.getElementById('input'); let ul = document.getElementById('ul'); let button = document.getElementById('button'); let ul_done = document.getElementById('ul_done'); button.addEventListener('click', function(){ let arr = []; arr.push(input.value); let li = document.createElement('li'); li.className = 'close'; ul.appendChild(li); li.innerHTML += arr; list(); }); function list(){ let list = document.getElementsByTagName('li'); for(let i=0; i < list.length; i++) { list[i].addEventListener('click', function(){ this.style.display = 'none'; ul_done.outerHTML += '<li>' + this.innerHTML + '</li>' + '<br>'; }) } } 
 #todolist { display: flex; justify-content: flex-start; } #todolist #tasks { min-width: 350px; width: 350px; background-color: lightgreen; padding: 25px 30px; margin: 50px auto; border-radius: 10px; min-height: 200px; height: auto; } #todolist #tasks input { padding: 5px 10px; outline: none; border: none; } #todolist #tasks button { background-color: #093; padding: 4px 12px; border-color: #00b300; color: #ccc; margin-left: 30px; font-weight: bold; font-size: 14px; } #todolist #tasks ul { padding-left: 20px; } #todolist #tasks ul li { margin: 5px; padding: 5px 15px; list-style-type: circle; } #todolist #tasks .close { cursor: pointer; } #todolist #tasks .close:hover { background-color: #ff4d4d; } #todolist #done { min-width: 350px; width: 350px; background-color: #ff4d4d; padding: 25px 30px; margin: 50px auto; border-radius: 10px; min-height: 200px; height: auto; } #todolist #done ul { padding-left: 15px; } #todolist #done ul li { text-decoration: line-through; } 
 <div id="todolist"> <div id="tasks"> <input type="text" id="input" autocomplete="off"> <button id="button">Add task</button> <ul id="ul"> </ul> </div> <div id="done"> <p id="ul_done"></p> </div> </div>

  • Your example does not show the situation you described due to an error in this line: ul_done.outerHTML += '<li>' + this.innerHTML + '</li>' + '<br>'; Replace outerHTML with innerHTML. And how to solve the problem - see my answer - Sergey Nudnov

1 answer 1

Each time this line is executed, a new event handler is added:

 list[i].addEventListener('click', function(){

That is, previously added items get a duplicate handler when adding each new item. To avoid this, use the named function.

And you also need to replace outerHTML with innerHTML , otherwise your example works only for one remote task:

 function appendToDeleted() { this.style.display = 'none'; ul_done.innerHTML += '<li>' + this.innerHTML + '</li>' + '<br>'; } list[i].addEventListener('click', appendToDeleted);

Here is the full version:

 let input = document.getElementById('input'); let ul = document.getElementById('ul'); let button = document.getElementById('button'); let ul_done = document.getElementById('ul_done'); button.addEventListener('click', function() { let arr = []; arr.push(input.value); let li = document.createElement('li'); li.className = 'close'; ul.appendChild(li); li.innerHTML += arr; list(); }); function appendToDeleted() { this.style.display = 'none'; ul_done.innerHTML += '<li>' + this.innerHTML + '</li>' + '<br>'; } function list() { let list = document.getElementsByTagName('li'); for (let i = 0; i < list.length; i++) { list[i].addEventListener('click', appendToDeleted); } } 
 #todolist { display: flex; justify-content: flex-start; } #todolist #tasks { min-width: 350px; width: 350px; background-color: lightgreen; padding: 25px 30px; margin: 50px auto; border-radius: 10px; min-height: 200px; height: auto; } #todolist #tasks input { padding: 5px 10px; outline: none; border: none; } #todolist #tasks button { background-color: #093; padding: 4px 12px; border-color: #00b300; color: #ccc; margin-left: 30px; font-weight: bold; font-size: 14px; } #todolist #tasks ul { padding-left: 20px; } #todolist #tasks ul li { margin: 5px; padding: 5px 15px; list-style-type: circle; } #todolist #tasks .close { cursor: pointer; } #todolist #tasks .close:hover { background-color: #ff4d4d; } #todolist #done { min-width: 350px; width: 350px; background-color: #ff4d4d; padding: 25px 30px; margin: 50px auto; border-radius: 10px; min-height: 200px; height: auto; } #todolist #done ul { padding-left: 15px; } #todolist #done ul li { text-decoration: line-through; } 
 <div id="todolist"> <div id="tasks"> <input type="text" id="input" autocomplete="off"> <button id="button">Add task</button> <ul id="ul"> </ul> </div> <div id="done"> <p id="ul_done"></p> </div> </div>