Javascript: Change multiple Element styles by ID

Question

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?

id is for unique element, you can use class instead, please include the HTML in the question. — Mamun
– Mamun, Commented Aug 8, 2021 at 9:34

Aditya · Accepted Answer · 2021-08-08 12:28:49Z

2

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

answered Aug 8, 2021 at 12:28

Aditya

1,3592 gold badges16 silver badges37 bronze badges

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

Comments

Nissrine · Accepted Answer · 2021-08-08 12:12:04Z

0

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");

answered Aug 8, 2021 at 12:12

Nissrine

11 bronze badge

Comments

Momin · Accepted Answer · 2021-08-08 12:36:56Z

0

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>

answered Aug 8, 2021 at 12:36

Momin

3,3163 gold badges35 silver badges52 bronze badges

Collectives™ on Stack Overflow

Javascript: Change multiple Element styles by ID

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related