Since I'm new in Java Script, I need to know how can I change list item color or style using Java Script?

For example I have following unordered list in my HTML file:

<ul id="list">
   <li>Text1</li>
   <li>Text2</li>
   <li>Text3</li>
   <li>Text4</li>
</ul>

Now when I click on item it should change the color and when clicking next item it will keep the new color of the previous item and change also color of the newly clicked item (example screenshot below):

Since I'm new in Java Script, I need to know how can I change list item color or style using Java Script?

For example I have following unordered list in my HTML file:

<ul id="list">
   <li>Text1</li>
   <li>Text2</li>
   <li>Text3</li>
   <li>Text4</li>
</ul>

Now when I click on item it should change the color and when clicking next item it will keep the new color of the previous item and change also color of the newly clicked item (example screenshot below):

• javascript

Share Follow edited Aug 17, 2017 at 9:26 Nithin 1,4341414 silver badges2929 bronze badges asked Aug 17, 2017 at 9:18 ReSaReSa 2311 silver badge22 bronze badges 6

• jQuery would make this rather easy, you could loop into that – Bas Pauw Commented Aug 17, 2017 at 9:21
• 2 @BasPauw why not Vanilla JS? It will take only 4 lines to code. – Muthu Kumaran Commented Aug 17, 2017 at 9:25
• 1 This question has been asked quite a lot on this website. Please try to find some questions of other users which were already answered. If you run into a problem you can't fix by searching this site or the web, ask it on SO! – Jeff Huijsmans Commented Aug 17, 2017 at 9:30
• @MuthuKumaran I guess I am too spoiled with the lazy hacking of jQuery to even think in regular javascript anymore – Bas Pauw Commented Aug 17, 2017 at 11:44
• @BasPauw it's time to get rid of jQuery. – Muthu Kumaran Commented Aug 17, 2017 at 12:16

 |  Show 1 more ment

5 Answers 5

Sorted by: Reset to default 3

Try the below solution. This will toggle the click as well.

var ul = document.getElementById("list");

var listItems = ul.getElementsByTagName("li");

for(li of  listItems){
  li.addEventListener('click', function(){
    if(this.classList.contains('active')){
      this.classList.remove("active");
    } else {
      this.classList.add("active");
    }
  })
}

.active{
  color: red;
}

<ul id="list">
   <li>Text1</li>
   <li>Text2</li>
   <li>Text3</li>
   <li>Text4</li>
</ul>

Array.from(document.getElementById('list').children).forEach(function(elem){
  elem.addEventListener('click', function(e){e.target.style.color = 'red';})
});

EDIT: All the people suggesting jQuery are crazy importing an entire library just to do one little thing

Use addEventListener to bind an event listener function to the element.

// find all the <li> elements
var listItems = document.querySelectorAll('#list li');
// iterate over the <li> elements
listItems.forEach(function (listItem) {
  // this function is called for each <li> element
  listItem.addEventListener('click', function () {
    // as soon as the list item is clicked, change its color to red
    this.style.color = 'red';
  });
});

<ul id="list">
   <li>Text1</li>
   <li>Text2</li>
   <li>Text3</li>
   <li>Text4</li>
</ul>

Or shorter:

document.querySelectorAll('li').forEach(li => li.addEventListener('click', _ => li.style.color = 'red'));

Below is the jquery code to achieve this

    $('li').click(function(){
$(this).css('background-color','red');
})

Add/remove color on each click of element,

Here is the working Fiddle

https://jsfiddle/jvk3/5Lyx827b/

html

<ul id="list">
   <li>Text1</li>
   <li>Text2</li>
   <li>Text3</li>
   <li>Text4</li>
</ul>

Jquery Script

<script>
        $(document).ready(function() {
$('li').click(function(event) {
    $(this).toggleClass('red');
});
});//end doc ready
    </script>

CSS

<style>
    .red{
        color: red;
    }
</style>