Change font-color by clicking a button (JS function)
Question
I'm trying to change the font color of the “div” area to black by clicking on the button but none of the variations I'm trying work. Does anyone have any ideas? Could this be syntax related?
I guess it could be because I specify the div and the elements inside are not reached by the function. On the other hand it could be because I use document.getElementById("black").style.color="black"; and the font is not directly addressed there. These are just some guesses of mine.
function black() { document.getElementById("black").style.color = "black"; }
<h1 class="eins">Farben</h1> <p class="blau">1. blau</p> <p class="pink">2. pink</p> <h1 class="zwei">Sonnenfarben</h1> <div id="black"> <ul> <li class="rot">rot</li> <li class="orange">orange</li> <li class="gelb">gelb</li> </ul> </div> <p class="braun">3. braun</p> <p class="grau">4. grau</p> <h1 class="drei">Grüntöne</h1> <p class="teal">I. teal</p> <p class="limegreen">II.limegreen</p> <p class="green">III. green</p> <button onclick="black()">Black</button>
Here is a codepen: https://codepen.io/koeddi/pen/WNzopZm
3 answers
solution1
1 2022-07-14 14:46:55
- Here is the main logic,
document.querySelectorAll("*")this will select all ements of theDOMand you than I just loop through it usingforEachloop. - I made the change here
document.querySelectorAll("#black *")select all children of id#blackand loop through it and then set color to black usingelement.style.color="black".
function black() { alert("This will only set all children of #black color to black"); document.querySelectorAll("#black *").forEach(element => { element.style.color = "black"; }) } function setAllToblack() { alert("This will set all elements color to black"); document.querySelectorAll("*").forEach(element => { element.style.color = "black"; }) }
.eins { text-indent: 40px; } .zwei { text-indent: 75px; } .blau { text-indent: 20px; color: blue; } .pink { text-indent: 20px; color: pink; } .rot { text-indent: 70px; color: red; } .orange { text-indent: 70px; color: orange; } .gelb { text-indent: 70px; color: yellow; } .braun { text-indent: 20px; color: brown; } .grau { text-indent: 20px; color: grey; } .teal { text-indent: 20px; color: teal; } .limegreen { text-indent: 20px; color: limegreen; } .green { text-indent: 20px; color: green; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="myjs.js"></script> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1 class="eins">Farben</h1> <p class="blau">1. blau</p> <p class="pink">2. pink</p> <h1 class="zwei">Sonnenfarben</h1> <div id="black"> <ul> <li class="rot">rot</li> <li class="orange">orange</li> <li class="gelb">gelb</li> </ul> </div> <p class="braun">3. braun</p> <p class="grau">4. grau</p> <h1 class="drei">Grüntöne</h1> <p class="teal">I. teal</p> <p class="limegreen">II.limegreen</p> <p class="green">III. green</p> <button onclick="black()">Black</button> <button onclick="setAllToblack()">Set all elements color to Black</button> </body> </html>
solution2
1 2022-07-14 14:50:01
Your document.getElementById("black").style.color="black"; is probably properly set to black, but it doesn't have any text elements not wrapped in other tags inside of it.
You only have text elements in it which are in different tags, and those tags have their own colors, and those selectors (more specific ones) are more important, so the color is not changing.
solution3
0 2022-07-14 15:29:22
Your code Work fine it changing Div content color but inside div you have li which have separates styles so because of that their color is not changed but if you want to changed their color too then you need to get all li with their id or class and changed their color or you can also do that with you parent id like parent.children(i).style="color" in loop to change their color.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.