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>