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

Javascript – JS Turn list text color with button click all one color

I am a beginner and I just do not know what to do. I tried various things like function click, getElement and onclick etc. but I just don’t know why it’s not working and what I should do in the first place. All I ever find is the button color and background color but nothing on text color and list. I just couldn’t find a proper solution anywhere :/

I have a list (it’s two seperate ones because of how I wrote the CSS lol) of rainbow colors written out and their respective colors (there are more but I didn’t want the post to be too long because of all the colors). I wanted all of them to turn black at once when you click on a button.
The files are all seperate.

it looks somewhat like this:

.list {
    margin: 0 50px 0 50px;
}
#red {
    list-style-type: circle;
    color: red;

}
#orange {
    list-style-type: circle;
    color: orange;
}

#yellow {
    list-style-type: circle;
    color:yellow;
}

#brown {
    color: brown;
}

#grey {
    color: grey;
}
<div class="list">
    <ul>
    <li id="red"> red </li>
    <li id="orange"> orange </li>
    <li id="yellow"> yellow </li>
    </ul>
    </div>

    <div class=list2>
    <ol start=3>
    <li id="brown"> brown </li>
    <li id="grey"> grey</li>
    </ol>
    </div>
   
    <button id="black">Click me</button>
Tags:

2

Answers


  1. 0

    Adding an event listener to the button will allow you to fire a method whenever it is clicked. Once you have a method firing on click, you can set up a method to pull all the list elements to updated, loop through and add a class to set the color to black.

    I’ve made the changes for you below. Note that I’ve updated your ids to classes, as it is typically best to control styles by class rather than id, as classes can be reused, while ids should only be assigned to a single element. I also added a new black class which set the color to black. Finally I added a common class to all list elements to allow pulling them specifically.

    //grab the button element
var button = document.querySelector("#black");

//attach event listener, will fire the changeColorToBlack method whenever the button is clicked
button.addEventListener("click",changeColorToBlack)

function changeColorToBlack(){
  //grab the list elements to change color
  var listElements = document.querySelectorAll(".list-el")  
  for(var el of listElements){  
    //add the 'black' class to all the list elements
    el.classList.add("black")
  }
}
    .list {
    margin: 0 50px 0 50px;
}

.list2 {
    margin: 0 50px 0 50px;
}
.red {
    list-style-type: circle;
    font-weight: bold;
    color: red;

}
.orange {
    list-style-type: circle;
    font-style: italic;
    color: orange;
}

.yellow {
    list-style-type: circle;
    font-style: italic;
    color:yellow;
}

.brown {
    font-style: italic;
    color: brown;
}

.black{
  color: black !important; /*Set to important to override other colors*/
}

.grey {
    font-weight: bold;
    color: grey;
}
    <div class="list">
    <ul>
    <li class="red list-el"> red </li>
    <li class="orange list-el"> orange </li>
    <li class="yellow list-el"> yellow </li>
    </ul>
    </div>

    <div class=list2>
    <ol start=3>
    <li class="brown list-el"> brown </li>
    <li class="grey list-el"> grey</li>
    </ol>
    </div>
   
    <button id="black">Click me</button>
    Login or Signup to reply.
  2. 0

    Use "document.querySelectorAll();" for list tag and just iterate through it while changing the color

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

Back To Top
Search