Question 49942 in Javascript Question posted in
A very good W3school tutorial can be found here.

Changing list item color on button click using Java Script? – Javascript

I want to know how can I change all list item color or style with a button using Java Script ?

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

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

and a button in my HTML file:

<button type="button" id="btn"> Click to change all item colors black </button>

Now when I click on the button it should change the color of all the list items to black from one single click.Example of screenshot below 🙂

[Example](https://phpout.com/wp-content/uploads/2023/04/7fmF7.png)

Tags:

4

Answers


  1. 0

    Add an event listener to the button that reacts to the click event.

    const btn =document.getElementById("btn")
btn.addEventListener("click", ()=>{

})

    and in the click event callback function write the logic to style the lists

    const btn =document.getElementById("btn")
btn.addEventListener("click", ()=>{
    const elements = document.getElementById('list').getElementsByTagName('li')
    // use a for loop to iterate over all the elements of `elements` array and apply the styles
    for(let i=0; i<elements.length; i++){
        elements[i].style.color = 'black';
    }
})
    Login or Signup to reply.
  2. 0

    A code that will change the color of all li elements under the id=list when the button is clicked, I hope it will be useful.

    var btn=document.getElementById('btn');
var listItems=document.getElementById("list").getElementsByTagName("li"); // get 'li' elements under the id="list"
btn.addEventListener('click',()=>{
  for(var li of listItems){ // iterate all 'li' elements to change colors.
    li.style.color='black';
  }
})
    li{
color:red;
}
    <ul id="list">
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ul>

<button type="button" id="btn"> Click to change all item colors black </button>
    Login or Signup to reply.
  3. 0

    You can loop through each element and apply style to each element

    let items = document.getElementById("list").getElementsByTagName("li");

document.getElementById('toRed')
.addEventListener('click',()=>{
  for(var li of items){
    li.style.color='red';
  }
});

document.getElementById('toBlue')
.addEventListener('click',()=>{
  for(var li of items){
    li.style.color='blue';
  }
});
    <ul id="list">
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ul>

<button id="toRed">
Change All to Red
</button>

<button id="toBlue">
Change All to Blue
</button>
    Login or Signup to reply.
  4. 0

    Why haven’t you assigned any id or class attributes to the <li> elements so that you could have differentiated which ones you have to work with?

    Considering these are the only li tags in your HTML page, you can write a function that gets these elements from JavaScript DOM and assign color attributes to the element.

    In order to get all elements with tag li, we have the getElementsByTagName() method.

    Also, I have just added few colors to the li items myself in your HTML code so as to initially see the items in different color.(Because I don’t know how you are getting different colors in the items)

    Your HTML Code=>

     <ul id="list">
        <font color="red"><li> Item 1 </li></font>
        <font color="green"><li> Item 2 </li></font>
        <font color="blue"><li> Item 3 </li></font>
    </ul>
    <button type="button" onclick='changeColor("black")' id="btn"> Click to change all item colors black </button>

    The JavaScript function that does the job=>

    function changeColor(color) {
            let listItems = document.getElementsByTagName("li");
            for(let i=0;i<listItems.length;i++){
                let element = listItems[i].style.color=color;
            }
        }

    You may have to put this JavaScript code within <script> tags or in another .js file which you have linked with this HTML page.

    Now, you can change the color to whatever you wanted and reuse the method for different colors.

    Thanks.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search