toggle class on click with javascript

Question

I am trying to create a simple on click event using js (no jQuery) If I run the below code it only works for the first item I click.

    var listItem = document.querySelector('li');
    listItem.addEventListener('click', function(event) {
      this.classList.toggle('clicked');
    });

.clicked {
  color:red;
}

<ul id="mylist">
  <li>item 1</li>
  <li>item 2</li>
</ul>

I looked at an alternative using

        var listItem = document.getElementById('mylist');
        listItem.addEventListener('click', function(event) {
          this.classList.toggle('clicked');
        });

    .clicked {
      background-color:red;
    }

        <ul id="mylist">
          <li>item 1</li>
          <li>item 2</li>
        </ul>

but this just toggles the ul rather than the li I clicked.

How can I target all li in my list so that each time they are clicked their class is toggeled

Borre Mosch · Accepted Answer · 2014-09-28 12:32:21Z

6

You should use querySelectorAll instead of querySelector, then loop over all list items:

var listItems = document.querySelectorAll('li');
for(var i = 0; i < listItems.length; i++){
    listItems[i].addEventListener('click', function(event) {
      this.classList.toggle('clicked');
    });
}

answered Sep 28, 2014 at 12:32

Borre Mosch

4,5942 gold badges22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

toggle class on click with javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related