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, Nov 17 '22 at 09:33
Have in mind that there isn't a closing div tag for your box div element — Coolis, Nov 17 '22 at 09:37

flyingfox · Answer 1 · 2022-11-17T11:20:21.687

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 '22 at 11:20

answered Nov 17 '22 at 09:34

flyingfox

13,414
3
24
39

Stil doesn´t work. I defined colors for every li before already. Is that causing an error? – Pekz Nov 17 '22 at 09:44
@Pekz Can you add full code so that we can analysis it – flyingfox Nov 17 '22 at 09:45
2

@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. – Fabrizio Calderan Nov 17 '22 at 09:46
@lucumt edited the code in – Pekz Nov 17 '22 at 09:50
@Pekz You need to follow Fabrizio Calderan's comment,that's the reason,you can check my updated answer now – flyingfox Nov 17 '22 at 10:07
@lucumt Thank you very much! Finally understood it now – Pekz Nov 17 '22 at 10:18
@lucumt actually forgot another ol in my html code... could you explain how i combine it with my ul so those colors will change to black aswell? <. – Pekz Nov 17 '22 at 11:17
@Pekz you can check this [queryselectorall-with-multiple-conditions](https://stackoverflow.com/questions/34001917/queryselectorall-with-multiple-conditions),I have updated my ansewr,just using `document.querySelectorAll('.liste2 > li,liste3 > li')` can do it – flyingfox Nov 17 '22 at 11:19
@Pekz hmmm,why not mark my ansewr as unaccepted? – flyingfox Nov 17 '22 at 12:16

score 0 · Accepted Answer · answered Nov 17 '22 at 10:25

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>

A toggle button would even be better, thx. I copied everything but it sadly doesn´t work out — Pekz, Nov 17 '22 at 10:37
then the issue might be on any other part of your code. are you getting any errors on the console? — Pratik Dev, Nov 17 '22 at 11:41

Change Text color of an ul with a Javascript button

2 Answers2