javascript - for 循环 - 仅每隔一个事件监听器工作

Question

I am very new to web design so im sure im doing something silly here but i am really curious what i am doing wrong, I am doing an online udemy course and for some reason only every second iteration of the li's that i spawn appear to have my event listener attached and i cannot for the life of me figure out why. I am assuming it is something todo with my "this" when adding the event listener, i tried to change to a listObjects[i].classList.toggle but it just threw an error however strangely enough if i do a this.classList.add("done") it works perfectly. thanks in advance!

 var enterBtn = document.querySelectorAll("button")[0]; var cancelBtn = document.querySelectorAll("button")[1]; var ul = document.querySelector("ul"); var listObjects function addList(todo) { var li = document.createElement("li"); li.appendChild(document.createTextNode(todo)); ul.appendChild(li); listObjects = document.querySelectorAll("li"); setListDone(); } enterBtn.addEventListener("click", function() { var listData = document.querySelector("input").value; addList(listData); }); cancelBtn.addEventListener("click", function() { ul.innerHTML = " "; }); function setListDone() { for (i = 0; i < listObjects.length; i++) { listObjects[i].addEventListener("click", function() { this.classList.toggle("done"); }); } }

 .done { text-decoration: line-through; }

 <h1>Todo List</h1> <input type="text"> <button>Enter</button> <button>Cancel</button> <ul> </ul>

Answer 1

You're never removing the old event listeners, so anything with an even index is getting toggled twice (or four times, or whatever) and ending up in the same state as it started. If you clear the old event listener first (or only add them to newly created elements) the issue disappears:

 var enterBtn = document.querySelectorAll("button")[0]; var cancelBtn = document.querySelectorAll("button")[1]; var ul = document.querySelector("ul"); var listObjects function addList(todo) { var li = document.createElement("li"); li.appendChild(document.createTextNode(todo)); ul.appendChild(li); listObjects = document.querySelectorAll("li"); setListDone(); } enterBtn.addEventListener("click", function() { var listData = document.querySelector("input").value; addList(listData); }); cancelBtn.addEventListener("click", function() { ul.innerHTML = " "; }); function setListDone() { for (i = 0; i < listObjects.length; i++) { listObjects[i].removeEventListener("click", liClickHandler); listObjects[i].addEventListener("click", liClickHandler); } } function liClickHandler() { this.classList.toggle("done"); }

 .done { text-decoration: line-through; }

 <h1>Todo List</h1> <input type="text"> <button>Enter</button> <button>Cancel</button> <ul> </ul>

Answer 2

The reason is you are using setListDone to assign click to all li . So when you add second li it will assign click to first li also. So when you click on first li it will call click twice . Further if you add third li then on first li click it will call click three times .

To solve issue you just need to pass newly created li to setListDone and update your setListDone as below.

function setListDone(li) {
  li.addEventListener("click", function() {
    this.classList.toggle("done");
  });
}

Test complete code below.

 var enterBtn = document.querySelectorAll("button")[0]; var cancelBtn = document.querySelectorAll("button")[1]; var ul = document.querySelector("ul"); var listObjects function addList(todo) { var li = document.createElement("li"); li.appendChild(document.createTextNode(todo)); ul.appendChild(li); listObjects = document.querySelectorAll("li"); setListDone(li); } enterBtn.addEventListener("click", function() { var listData = document.querySelector("input").value; addList(listData); }); cancelBtn.addEventListener("click", function() { ul.innerHTML = " "; }); function setListDone(li) { li.addEventListener("click", function() { this.classList.toggle("done"); }); }

 .done { text-decoration: line-through; }

 <h1>Todo List</h1> <input type="text"> <button>Enter</button> <button>Cancel</button> <ul> </ul>

Answer 3

Every time you add item to the list you add event listeners to every item. That's why some of the are trigged twice or event more.

listObjects[i].addEventListener("click", function() {
  this.classList.toggle("done");
});

the simple solution is below.

you just need to add event listener to a single <li> every time you add element to the list.

 var enterBtn = document.querySelectorAll("button")[0]; var cancelBtn = document.querySelectorAll("button")[1]; var ul = document.querySelector("ul"); var listObjects function addList(todo) { var li = document.createElement("li"); li.appendChild(document.createTextNode(todo)); // Here you add the listener to just created list item li.addEventListener("click", function() { this.classList.toggle("done"); }); ul.appendChild(li); } enterBtn.addEventListener("click", function() { var listData = document.querySelector("input").value; addList(listData); }); cancelBtn.addEventListener("click", function() { ul.innerHTML = " "; });

 .done { text-decoration: line-through; }

 <h1>Todo List</h1> <input type="text"> <button>Enter</button> <button>Cancel</button> <ul> </ul>