[FIXED] How can I toggle a class to an element when clicked?

Issue

Problem: I want to make it so that when I click on a li element, a click event happens and the class "done" is added to it. I know to do this I need to target all the li's, and a for loop can be used, the only way I've been able to get it to work is by commenting out the code, and creating a new variable to target the class name li, and creating a loop that makes it so it targets all the li items, and adding the "this" thingy, as well as a click event, toggling the class list to done. But once I tried adding it with the rest of the code, it didn't work.

let button = document.getElementById("button");
let input = document.getElementById("userinput");
let ul = document.querySelector("ul");

function createListElement() {
  let li = document.createElement("li");
  li.appendChild(document.createTextNode(input.value));
  ul.appendChild(li);
  input.value = "";
}

function addListAfterClick() {
  if (input.value.length > 0) {
    createListElement();
  }
}

button.addEventListener("click", addListAfterClick);

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

<input type="text" id="userinput">
<button id="button">+</button>
<ul></ul>

Solution

You can add an event listener to the ul element. If the child element that is clicked matches a list item add a new class to its classList.

Adding one listener to a parent element that catches events from its child elements as they "bubble up" the DOM is known as event delegation.

const button = document.getElementById('button');
const input = document.getElementById('userinput');
const ul = document.querySelector('ul');

// Add the click listener to the `ul` element
// which calls the `handleClick` handler
ul.addEventListener('click', handleClick);

// Pass in the event to the function, check
// that the clicked element is a list item
// and add a class to it.
function handleClick(e) {
  if (e.target.matches('li')) {
    e.target.classList.add('done');
  }
}

function createListElement() {
  let li = document.createElement('li');
  li.appendChild(document.createTextNode(input.value));
  ul.appendChild(li);
  input.value = '';
}

function addListAfterClick() {
  if (input.value.length > 0) {
    createListElement();
  }
}

button.addEventListener('click', addListAfterClick);

li:hover { cursor: pointer; }
.done { text-decoration: line-through; }

<input type="text" id="userinput">
<button id="button">+</button>
<ul></ul>

Answered By - Andy

Answer Checked By - Timothy Miller (PHPFixing Admin)