Add Class After Delay With Vanilla Javascript

I am making a website with a splash screen that I want to make disappear after 3 seconds. I can successfully do it when I include jQuery, but this takes time to load (especially i

Solution 1:

I don't think you want to add the function as the load event listener of the splash. You should add it to the load event of the page.

See comments inline for more details on reorganizing the code. Unfortunately, it won't work with cookies here in the Stack Overflow snippet environment.

Note that the splash is set to be hidden (via CSS) by default. This is a better practice than showing it by default and then hiding it. If, after reading the cookie, it is determined that the splash should not be shown, some users may wind up seeing the splash momentarily on their screens due to processing limitations, or worse if there is any kind of error in your code, the splash may wind up being shown and never taken away because the JS stops executing at the error.

// Get a reference to the splash dialogvar splash = document.querySelector(".splash");

// When the window is loaded....window.addEventListener("load", function() {
  
  // Check to see if the cookie indicates a first-time visitif(document.cookie.indexOf("visited=true") === -1) {

    // Reveal the splash (remember: splash is hidden by default by CSS)
    splash.classList.remove("hidden");
    
    // .5 seconds later, hide the splashsetTimeout(function(){
      splash.classList.add("hidden");
      
      // >> Set cookie to visited here <<
    }, 500);
  } 
});

.splash {
  height:200px;
  width:200px;
  background:yellow;
}

.hidden {
  display:none;
}

<divclass="splash hidden">S P L A S H !</div>

Solution 2:

document.getElementsByClassName("splash").addEventListener("load", //not possible as ByClassName returns a collection not an elementfunction() {
if(document.cookie.indexOf("visited=true") === -1) {//why not simply !...setTimeout(function(){
        this.classList.add("hidden");//this is window as setTimeout is a window function...
    }, 3000);
} else {
    this.classList.add("hidden");//the only that work
}
});

The right way:

document.getElementsByClassName("splash").forEach(el=>{el.addEventListener("load",function() {
if(!document.cookie.indexOf("visited=true")) {
    setTimeout(function(){
        this.classList.add("hidden");
    }.bind(this), 3000);//fix of context
} else {
    this.classList.add("hidden");
}
})});

Solution 3:

You can include this IIFE at the bottom of your page so that it will be executed when the splash DOM element is ready. This way you can avoid the event listener.

I also converted your splash to use the ID splash rather than a class. If you prefer the class, when you use document.getElementsByClassName("splash") it returns an array of elements. In that case you'll have to specify which elements of the returned array you want to use (i.e. document.getElementsByClassName("splash")[0] or iterate through them).

(function() {
  var splash = document.getElementById("splash");
  if (document.cookie.indexOf("visited=true") === -1) {
    splash.classList.remove("hidden"); // Display the splashsetTimeout(function() {
      splash.classList.add("hidden"); // Hide it after the timeout
    }, 500);
  }
})();

#splash { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #ddd; }
.hidden { display: none; }

Not splashed!
<divid="splash"class="hidden">Splashed!</div>