MacroG0D MacroG0D - 1 month ago 7
CSS Question

JS - How to select and line-through the items in html list by pressing on a button?

I'm just starting to learn JS and collided with a specific task that i dont understand how to solve.

Suppose we have a page that has a list, and there is a button with which I can supplement this list with new cases.
 The problem that I encountered:
 I need to implement a function in a certain way that will change the style of the selected line from the list of all existing and added elements.

 For example, if our list - "a list of things that we have to do", i need to make so that the user can press the "Done" button, and select the desired line. After the selection the selected line gets a line-through.



function addItemToTheList() {
var newItem = document.createElement("li");
var input = document.getElementById("Input");
newItem.innerHTML = input.value;
input.value = "";
document.getElementById("todo").appendChild(newItem);
}

#todo {
font-family: Arial;
}

#todo .done {
color:gray;
text-decoration:line-through;
}

<!doctype html>
<html>
<head>
<title> How can user change added and predefined elements in the list?</title>
</head>
<pre>
<input type = "text" id = "Input" maxlength = "42" size = "42" placeholder = " Add a task here"> <input
type = "button" value = "Add" onclick = "addItemToTheList()">

</pre>
<hr align = "left" width = "378">
<body>
<div id = "todoList">
<ol id = "todo">
<li class = "done"> Watch all seasons of "Game of Thrones"</li>
<li class = "done"> Write a book</li>
<li class = "undone"> Learn "JS"</li>
</ol>
</div>
</body>
</html>





Would anybody be willing to point me in the right direction?

Answer

You have to add, first, a click event on each undone tasks. Then when you create a task just add another clickevent.

Then you just have to click on an undone tasks to change his state.

Hope this is what you want :

function addItemToTheList() {
  var newItem = document.createElement("li");
  var input = document.getElementById("Input");
  newItem.innerHTML = input.value;
  input.value = "";
  document.getElementById("todo").appendChild(newItem);
  
  // Add click listener
  newItem.addEventListener('click', done);
}

function done() {
  this.className = "done";
  this.removeEventListener('click',done);
}

// Initialize all listener for current undone tasks
function init() {
  var undoneItems = document.getElementsByClassName('undone');
  for(var i = 0; i < undoneItems.length; i++){
    undoneItems[i].addEventListener('click', done);  
  }
}
#todo {
  font-family: Arial;
}

#todo .done {
  color:gray;
  text-decoration:line-through;
}

#todo .undone {
  cursor: pointer;
}
<!doctype html>
<html>
  <head>
    <title> How can user change added and predefined elements in the list?</title>
  </head>
  <body onload="init()">
    <pre>
      <input type = "text" id = "Input" maxlength = "42" size = "42" placeholder = " Add a task here">       <input 
type = "button" value = "Add" onclick = "addItemToTheList()">

    </pre>
    <hr align = "left" width = "378">
    <div id = "todoList">
	    <ol id = "todo">
        <li class = "done"> Watch all seasons of "Game of Thrones"</li>
        <li class = "done"> Write a book</li>
        <li class = "undone"> Learn "JS"</li>
      </ol> 
    </div>
  </body>
</html>