CODEWITHSUNDEEP
javascriptdomelement
Sebastian
Sebastian

Reputation: 11

<li> element class change, using DOM

I would like to make the <li> element to change the class when I click on it, and when I click one more time to remove it. I have used simple code like this :

var ul = document.querySelector("ul");

ul.addEventListener("click", function() {
  var li = document.querySelector("li");
  li.classList.add("done");
})


ul.addEventListener("dblclick", function() {
  var li = document.querySelector("li");
  li.classList.toggle("done");
})

so as you can see on click it goes on and on dbl click it goes off, but it is working on all the <li> elements at once.

Upvotes: 1

Views: 508

Answers (3)

Wesley
Wesley

Reputation: 45

Make sure to select the right element when you click on it using event.target.

<ul id="my-list">
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
</ul>

const list = document.querySelector('#my-list');
list.addEventListener('click', (event) => {

    // The clicked element
    const target = event.target;

    // Make sure the clicked element is an <li> element
    if (target instanceof HTMLLIElement) {
        // Toggle class
        target.classList.toggle('done');
    }
});

Useful documentation: https://developer.mozilla.org/en-US/docs/Web/API/Event/target

Upvotes: 0

ET-CS
ET-CS

Reputation: 7180

You have set the event listener on the UL, which will impact all LI inside. Another options - you can set the event listener on the LI instead.

var lis = document.querySelectorAll("li");

lis.forEach(li => {
    li.addEventListener("click", function(ev){
        ev.target.classList.add("done");
    })


    li.addEventListener("dblclick", function(ev) {
        ev.target.classList.remove("done");
    })
});
li {
  color: lightgray;
}

li.done {
  color: green;
}

li {
  cursor: pointer;
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

https://jsfiddle.net/3jcbaqgu/17/

Upvotes: 0

Silviu Burcea
Silviu Burcea

Reputation: 5348

You need to apply the class to the event's target.

var ul = document.querySelector("ul");

ul.addEventListener("click", (e) => {
  e.target.classList.add("done");
});

ul.addEventListener("dblclick", (e) => {
  e.target.classList.toggle("done");
});
.done {
  background: green;
}
<ul>
  <li>A</li>
  <li>A</li>
  <li>A</li>
  <li>A</li>
  <li>A</li>
</ul>

Upvotes: 2

Related Questions