PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Saturday, October 15, 2022

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

 October 15, 2022     dom, dom-events, javascript     No comments   

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)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing