Issue
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.
Solution
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 By - Pratik Dev
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.