How to add and remove an HTML class at a specific time after page load?

Question

I'm trying to add and remove an HTML class (.flashy-design) to an HTML element (ID bland-html-element) a few seconds after page load.

My attempts below don't inject the class.

setTimeout(function() {
    function addFlashyDesign() {
        var element = document.getElementById("bland-html-element");
        element.classList.add("flashy-design");
    }
}, 3000);

or

function startDelay(){
    setTimeout(function() {
        function addFlashyDesign() {
            var element = document.getElementById("bland-html-element");
            element.classList.add("flashy-design");
        }
    }, 3000);
};

window.onload = "startDelay();";

Ideas?

Answer 1

You don't need to specify window.onload for your setTimeout() method since it'll self-invoke on page load.

You also don't need to nest so many functions like that. You can either:

Create a named function outside the setTimeout() method then reference the function name on the method like this:

function delayFunc() {
  var element = document.getElementById("bland-html-element");
  element.classList.add("flashy-design");
}

setTimeout(delayFunc, 3000); // The above function will be invoked after 3 seconds

Or

Create an anonymous function within the setTimeout() method itself like this:

setTimeout(function(){
  var element = document.getElementById("bland-html-element"); 
  element.classList.add("flashy-design");
}, 3000);

Answer 2

The explanation is in the code. The main mistake you made was not using the callback function as you should.

 let element = document.getElementById("bland-html-element"); // show after 2 seconds // RECOMMENDATION: use window.setTimeout instead of setTimeout // NOTE: use a callback function, not an embedded named function window.setTimeout(function() { element.classList.add("flashy-design"); }, 2000); // hide after 3 seconds window.setTimeout(function() { element.classList.remove("flashy-design"); }, 3000);

 #bland-html-element{ height: 200px; width: 200px; background-color: green; display: none; } #bland-html-element.flashy-design{ display: block; }

 <div id="bland-html-element"></div>

PS: Don't use window.onload . Use window.addEventListener('load', function(){}) instead. I didn't embed it after a load event in my example, but you should or you risk running the code before bland-html-element exists in your DOM.

Answer 3

The reason this is not working is that, in both examples, you have a nested function - addFlashyDesign - that you are not calling. Instead, extract the that function and attach a function to the window onload listener. When this function is called it starts the timeout which calls addFlashyDesign after 3s.

You should keep the window.onload if, as you mention in your question, you want to add the class after the page has loaded.

The load event on the window object triggers when the whole page is loaded including styles, images and other resources.

function addFlashyDesign() {
    var element = document.getElementById("bland-html-element");
    element.classList.add("flashy-design");
}

window.onload = () => setTimeout(addFlashyDesign, 3000);