Using Javascript to update various element styles using their corresponding IDs

Question

Using Javascript to update various element styles using their corresponding IDs

I am currently working on implementing a dark mode feature and I am encountering an issue when trying to change the CSS of multiple elements at once.

This is my JavaScript code:

      var elem = document.getElementById('fonts');
      for(var i=0; i<elem.length; i++){
        elem[i].style.color="#FFFFFF";
        console.log(elem[i]);
      }

However, nothing seems to be changing. I believe I need to use a loop because there are multiple elements with the same id "fonts". If I try without the loop, only the first one gets affected.

The console isn't showing any errors either. Was there something wrong with how I implemented this?

javascript css

Answer 1

Answer №1

It seems like you may be approaching this in the wrong way. Instead of using the same id for multiple elements, you should consider using a class instead.

Here is an example to demonstrate:

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>

Remember that the CSS and button included in this example are not necessary; they are just for illustration purposes. You can use querySelectorAll to target all elements with the same class and then loop through them using a for loop.

Answer 2

It seems like you may be approaching this in the wrong way. Instead of using the same id for multiple elements, you should consider using a class instead.

Here is an example to demonstrate:

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>

Remember that the CSS and button included in this example are not necessary; they are just for illustration purposes. You can use querySelectorAll to target all elements with the same class and then loop through them using a for loop.

Answer 3

Answer №2

using the <div id="fonts"> more than once in your HTML will cause issues with your code.

Replace ids with classes
Consider using HTML DOM's "querySelector" instead of "getElementById".

For an id, follow this syntax:

var elem = document.querySelector("#fonts");

For a class, use this syntax:

var elem = document.querySelector(".fonts");

Answer 4

using the <div id="fonts"> more than once in your HTML will cause issues with your code.

Replace ids with classes
Consider using HTML DOM's "querySelector" instead of "getElementById".

For an id, follow this syntax:

var elem = document.querySelector("#fonts");

For a class, use this syntax:

var elem = document.querySelector(".fonts");

Answer 5

Answer №3

One way to enhance the readability and simplify the code is by utilizing the for...of statement.

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>

Answer 6

One way to enhance the readability and simplify the code is by utilizing the for...of statement.

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>

Using Javascript to update various element styles using their corresponding IDs

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble with Next.js and Next-auth? When I make an HTTP request in getServerSideProps, getSession is returning null in my secured API Route

React and Material UI: troubleshooting problems with layout columns

How can I position an element to the bottom right using CSS?

I aim to toggle the visibility of input fields upon clicking a button

Can you explain the distinctions among 'data:', 'data: ()', and 'data()' when working with Vue.js?

What advantages does the Step function (AWS) offer compared to setTimeout (Javascript) for scheduling tasks?

Issue encountered when running a minification build on Angular 5

Arrangement of 3 columns on the left and 1 column on the right using flex-box layout

A div element with a z-index of 9 remaining below another element with a z-index of 1

Show two spans, each underneath the other

Disable audio playback on tab unfocus using Javascript/HTML

I have been tirelessly attempting to resolve this issue, yet all my efforts have proven futile thus

How can I fetch and reference multiple local JSON files in Vue using Axios?

Is it possible to launch a Nextjs app on Vercel for production purposes? How well does it handle high volumes of traffic?

Dynamic loading of JavaScript/HTML content using jQuery Mobile and PhoneGap

Ways to generate arrays in Typescript

How to implement form modal binding using Laravel and Vue.js

Selecting options on hover, either A or B at the least

Having trouble with NVM not working correctly in Ubuntu 21.04 Terminal?

What is the proper way to employ if and else if statements within Angular2?