I'm actually working on a darkmode and have a problem to change the css of more than one element.
JS code:
var elem = document.getElementById('fonts');
for(var i=0; i<elem.length; i++){
elem[i].style.color="#FFFFFF";
console.log(elem[i]);
}
But nothing changes.. i think i need to do it with the loop because i got more elements with the id "fonts". If i do it without the loop, than will only change the first one.
The console dont give an error or anything.. did i something wrong?
Well you are doing it the wrong way, firstly you can use same id for multiple elements instead you have to use a class
So check this out
document.getElementById("btn").addEventListener("click", function() {
var elem = document.querySelectorAll('.fonts');
for(var i=0; i<elem.length; i++){
elem[i].style.color = "#00aeff";
console.log(elem[i]);
}
});* { margin: 0; padding: 0; }<h1 class="fonts">Heading1</h1>
<p class="fonts">Paragraph</p>
<span class="fonts">Span</span>
<div class="fonts">Div</div>
<button id="btn">Change</button>And the CSS and button are not necessary it's just for example, you use querySelectorAll to select all the elements with same class or whatever and then run a for loop on those elements
you can only use the <div id="fonts"> once. so if you have it multiple times in your html your code won't work..
change id's to classes
try your code try using the HTML DOM "querySelector" instead of "getElementById".
for an id use this syntax
var elem = document.querySelector("#fonts");
for a class use this syntax
var elem = document.querySelector(".fonts");
We can also use the for...of statement to simplified the code and increase more readability
document.getElementById("btn").addEventListener("click", function() {
let elem = document.querySelectorAll('.fonts');
for (let font of elem) {
font.style.color = "#00aeff";
}
});* {
margin: 0;
padding: 0;
}<h1 class="fonts">Heading1</h1>
<p class="fonts">Paragraph</p>
<span class="fonts">Span</span>
<div class="fonts">Div</div>
<button id="btn">Change</button>