In this code why this console error is coming?

Question

I am trying to make a preloader.. this code is just for practice but this is not working.. i don't know how to fix it.. ..
https://code.sololearn.com/WL9gpMkEPR3i/?ref=app

Answer 1

Js is getting loaded before html ,so script tries to access a element which isn't available yet so you see that error ,to prevent js from getting loaded before html document

Add your script in this function
window.onload=function(){

}

or add your script in html before closing body tag

Answer 2

document.getElementById() returns null if the element with specified id is not found.

On sololearn JS is executed before HTML is loaded. Due to this you get a null instead of reference to HTMLElement.

You can simple move first statement within load event listener.

window.addEventListener("load",function(){
var preloader=document.getElementById("loading_bg");

preloader.style.display='none';
});

Also read: https://www.sololearn.com/post/90825/?ref=app

As your page has not enough content it'll load immediately and you can't even see the #loading_bg.

You can add an image that will take some time to load and till then #loading_bg will be visible.(If the image gets cached then it'll always load immediately on later visits to page and #loading_bg won't be visible)

https://code.sololearn.com/W12yhsBxpn7V/?ref=app

another example:
https://code.sololearn.com/W8wTPD8Zpnkh/?ref=app