What is preventing me from using JavaScript to remove this class?

Question

What is preventing me from using JavaScript to remove this class?

Struggling to implement a skeleton loading screen with CSS classes and JavaScript. The idea is to apply the 'skeleton' class to elements, style them accordingly, then remove the class using a timeout set in JavaScript. However, I'm encountering issues trying to get the JavaScript functionality to work.

Below is the snippet of my JavaScript code responsible for removing the class. Can you spot what might be causing it not to work?

const timeout = setTimeout(loading, 3000);

function loading() {
    const element = document.getElementById("skeleton");
    element.classList.remove("skeleton");   
}

javascript html css

Answer 1

Answer №1

It seems like the issue might be due to having multiple "skeleton" elements with the same id, which should be unique. To fix this, you can remove the ids and target the classes instead. You can use forEach to loop through each element and remove the class.

const timeout = setTimeout(loading, 3000);

function loading() {
  const skeletons = document.querySelectorAll('.skeleton');
  skeletons.forEach(skeleton => {
    skeleton.classList.remove('skeleton');
  });   
}

.skeleton { color: red; }

<div class="skeleton">One</div>
<div class="skeleton">Two</div>
<div class="skeleton">Three</div>
<div class="skeleton">Four</div>

Answer 2

It seems like the issue might be due to having multiple "skeleton" elements with the same id, which should be unique. To fix this, you can remove the ids and target the classes instead. You can use forEach to loop through each element and remove the class.

const timeout = setTimeout(loading, 3000);

function loading() {
  const skeletons = document.querySelectorAll('.skeleton');
  skeletons.forEach(skeleton => {
    skeleton.classList.remove('skeleton');
  });   
}

.skeleton { color: red; }

<div class="skeleton">One</div>
<div class="skeleton">Two</div>
<div class="skeleton">Three</div>
<div class="skeleton">Four</div>

Answer 3

Answer №2

Looking for the HTML element with id or class name "skeleton"? Try this solution:


function removeSkeletonClass() {
    const element = document.getElementsByClassName("skeleton")[0];
    element.classList.remove("skeleton");   
}

Answer 4

Looking for the HTML element with id or class name "skeleton"? Try this solution:


function removeSkeletonClass() {
    const element = document.getElementsByClassName("skeleton")[0];
    element.classList.remove("skeleton");   
}

What is preventing me from using JavaScript to remove this class?

Answer №1

Answer №2

Similar questions

Pusher: Received no callbacks for testing the pusher functionality on my event

What sets apart a React component from a function-as-component in React?

What steps should I take to successfully install using npm if I keep encountering the same error?

Should tokenized email addresses be avoided as URL parameters in customer communication?

Utilizing the Bootstrap grid system for responsiveness is optimized for a first word that is precisely 15 characters

Changing the MIME type of a JavaScript file in a Jade/Pug environment to text/html

Why is the leading zero being ignored when I try to print the contents of the session in PHP?

Error occurs with Nodemon application crashing while executing Gulp command

Top methods for incorporating whitespace on both sides of the page

Challenge with modal dialog scrolling on iPad and iPhone

Tips for inserting SVG images into PDF documents

When you hover over an image, both the image's opacity and the color of the title beneath it change. However, if the title expands to two lines, it messes up

Is there a way to increase the total of each row by two when a button is clicked?

Introducing Vuetify 3's v-file-input with interactive clickable chips!

JavaScript Class experiencing issues with returning NAN when using the Multiplication method

Generating individual div elements for every piece of data in ReactJS with the help of Redux

Could a user upload a video directly to their channel using an HTML/JavaScript form?

Sending HTML content to viewChild in Angular 5

What is causing the error message "Uncaught TypeError: Cannot read properties of null (reading 'push')" to be displayed when running this code?

Implementing Partial Login and Registration Views using AngularJS in conjunction with MVC5 and ASP.NET Identity