Applying a CSS class to each <li> element by looping through it
Question
I am creating a simple todo-list in Javascript and i am done adding elements. now i just want to add a simple CSS class to each li element inside unordered list. please guide me where i am wrong.
var button = document.getElementById('button'); var input = document.getElementById('userinput'); var ul = document.getElementById("foo"); var items = ul.getElementsByTagName("li")[0]; function inputLength(){ return input.value.length > 0 } function createListElement(){ var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(li); input.value = ""; } function addListAfterClick(){ if (inputLength()) { createListElement(); } } function addListAfterKeyPress(){ if (inputLength() && event.keyCode === 13) { createListElement(); } } function taskDone(){ for(var i = 0; i < items.length; ++i){ items[i].classList.toggle("done") } } items.addEventListener("click", taskDone); button.addEventListener("click", addListAfterClick); input.addEventListener("keypress", addListAfterKeyPress);
.done{ text-decoration: line-through; }
<!DOCTYPE html> <html> <head> <title>Javascript and DOM</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>No <span style="color: green">EXCUSES</span> do it must!</h1> <input id="userinput" type="text" name="tasks" placeholder="Enter task"> <button id="button">Enter</button> <ul id = "foo"> <li>Drink milk</li> <li>Write some code</li> <li>Eat healthy </li> <li>Pray</li> </ul> <script type="text/javascript" src="script.js"></script> </body> </html>
It seems right to me but the class is not applying with a click to li elements. Any help would be highly appreciated. Thank you in Advance.
3 answers
solution1
2 ACCPTED 2018-05-27 14:28:33
I am assuming you want to toggle each element on and off individually. The logic is this: get all the li s hardcoded into the ul on document load (achieved by doing document.addEventListener("DOMContentLoaded", ... ), attach the click event to them one by one, and whenever a new item is added bind the click event to it as soon as it's created. The notable thing is that you bind events to individual DOM elements not entire classes, and subsequent added elements needed to be treated again. On a side note, this whole process can be simplified (a lot) by using the jQuery library.
var button = document.getElementById('button'); var input = document.getElementById('userinput'); var ul = document.getElementById("foo"); var items; function inputLength(){ return input.value.length > 0 } function createListElement(){ var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(li); li.addEventListener("click", taskDone); input.value = ""; } function addListAfterClick(){ if (inputLength()) { createListElement(); } } function addListAfterKeyPress(){ if (inputLength() && event.keyCode === 13) { createListElement(); } } function taskDone(e){ e.target.classList.toggle("done"); } button.addEventListener("click", addListAfterClick); document.addEventListener("DOMContentLoaded", function(event) { for (let x of document.getElementsByTagName("li")) x.addEventListener("click", taskDone); }); input.addEventListener("keypress", addListAfterKeyPress);
.done{ text-decoration: line-through; }
<!DOCTYPE html> <html> <head> <title>Javascript and DOM</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>No <span style="color: green">EXCUSES</span> do it must!</h1> <input id="userinput" type="text" name="tasks" placeholder="Enter task"> <button id="button">Enter</button> <ul id = "foo"> <li>Drink milk</li> <li>Write some code</li> <li>Eat healthy </li> <li>Pray</li> </ul> <script type="text/javascript" src="script.js"></script> </body> </html>
solution2
0 2018-05-27 14:16:28
在createListElement函数中，在创建li之后添加以下代码：li.classList.add（“ done”）;
solution3
-1 2018-05-27 14:12:44
Use this, supports all browsers, no jquery required, etc...
[].forEach.call(document.querySelectorAll('li'),function(li){
li.className = 'myclass';
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.