Change Text color of an ul with a Javascript button

Question

I need to create a button to change my li's to black.

html

 <h2>Sonnenfarben</h2>
  <div class="box">
     
    <ul type="circle" class="liste2">
      <li class="farbeRot">rot</li>
      <li class="farbeOrange">orange</li>
      <li class="farbeGelb">gelb</li>
    </ul>
    
    <button onclick="changeColor()">Lights out</button>

  <ol class="liste3" start="3">
      <li class="farbeBraun">braun</li>
      <li class="farbeGrau">grau</li>
  </ol>

css

.farbeRot{
  color: ;
  font-weight: bold;
}

.farbeOrange{
  color: orange;
  font-style: italic;
}

.farbeGelb{
  color: yellow;
}

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

.farbeGrau{
  color: grey;
  font-weight: bold;
}

.box{
  color: black;
}

JS

function changeColor(){
  document.querySelector('.box').style.color = "black";
}

Tried to connect everything but didn´t work out.

edit: put in all colors I defined already. Tried deleting them etc. but it still did not work.

document.querySelector('.box').style.color = "black" is the same like .box{color: black;} which make it not show effect — flyingfox
– flyingfox, Commented Nov 17, 2022 at 9:33
Have in mind that there isn't a closing div tag for your box div element — Coolis
– Coolis, Commented Nov 17, 2022 at 9:37

flyingfox · Accepted Answer · 2022-11-17 11:20:21Z

2

You need to change the default color of .box from black to other values,such as red or green

.box{
  color: red;
}

function changeColor(){
  let lis = document.querySelectorAll('.liste2 > li,liste3 > li');
  for(let i=0;i<lis.length;i++){
    lis[i].style.color = "black";
  }
}

.farbeRot{
  color: green;
  font-weight: bold;
}

.farbeOrange{
  color: orange;
  font-style: italic;
}

.farbeGelb{
  color: yellow;
}

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

.farbeGrau{
  color: grey;
  font-weight: bold;
}

.box{
  color: black;
}

<h2>Sonnenfarben</h2>
  <div class="box">
     
    <ul type="circle" class="liste2">
      <li class="farbeRot">rot</li>
      <li class="farbeOrange">orange</li>
      <li class="farbeGelb">gelb</li>
    </ul>
   

  <ol class="liste3" start="3">
      <li class="farbeBraun">braun</li>
      <li class="farbeGrau">grau</li>
  </ol>
  
   <button onclick="changeColor()">Lights out</button>
</div>

edited Nov 17, 2022 at 11:20

answered Nov 17, 2022 at 9:34

flyingfox

13.5k4 gold badges30 silver badges43 bronze badges

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

9 Comments

Pekz Over a year ago

Stil doesn´t work. I defined colors for every li before already. Is that causing an error?

flyingfox Over a year ago

@Pekz Can you add full code so that we can analysis it

Fabrizio Calderan Over a year ago

@Pekz if you override the color by setting a style to the list-items then you must set the color using the same selector and not the parent list element.

Pekz Over a year ago

@lucumt edited the code in

flyingfox Over a year ago

@Pekz You need to follow Fabrizio Calderan's comment,that's the reason,you can check my updated answer now

|

Pratik Dev · Accepted Answer · 2022-11-17 10:25:36Z

0

if you just wanna change your li's color by a click event, don't do it that manually(almost). write a CSS-styled class for your ul and toggle it on click event

function changeColor() {
  const liste2 = document.querySelector(".liste2");
  liste2.classList.toggle("black-ul")
  
  /*
  if you just want the lights off and not toggle, replace above "toggle" with "add"
  simple javascript my boy
  */
  
}

.farbeRot{
  color: green;
  font-weight: bold;
}

.farbeOrange{
  color: orange;
  font-style: italic;
}

.farbeGelb{
  color: pink;
}

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

.farbeGrau{
  color: grey;
  font-weight: bold;
}

.box{
  color: black;
}


/* below code is to make all the li black */

.black-ul > li {
  color: black
}

<div class="box">
     
    <ul type="circle" class="liste2">
      <li class="farbeRot">rot</li>
      <li class="farbeOrange">orange</li>
      <li class="farbeGelb">gelb</li>
    </ul>
    
    <button onclick="changeColor()">Toggle light</button>
</div>

answered Nov 17, 2022 at 10:25

Pratik Dev

4544 silver badges13 bronze badges

3 Comments

Pekz Over a year ago

A toggle button would even be better, thx. I copied everything but it sadly doesn´t work out

Pratik Dev Over a year ago

then the issue might be on any other part of your code. are you getting any errors on the console?

Pekz Over a year ago

Solved everything thanks for your help!

Collectives™ on Stack Overflow

Change Text color of an ul with a Javascript button

2 Answers 2

9 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related