First, while this post is similar to How to execute a function when page has fully loaded?, the main difference is that I want to execute a function while the page is trying to load and not after is has already loaded. In the question above, they are using DOM, which would not work for this question.
I am practicing HTML and JavaScript and am working on designing a loading screen using addEventListener so that whenever the body is trying to be loaded, the loading screen pops up. Below is all that I currently have:
<!DOCTYPE html lang="en-US">
<html>
<body id="mainBody">
<main>
<p id="testValue"></p>
<script type="text/javascript">
document.getElementById("mainBody").addEventListener("load", myFunction);
function myFunction() {
document.getElementById("testValue").innerHTML = "Body is loaded";
}
</script>
</main>
</body>
</html>
The expectation is that when I refresh the page, the function myFunction will be called. Once the page is loaded, I am expecting the p tag to populate with "Body is loaded". Although, nothing happens.
Any insight as to why is greatly appreciated.
Thank you!
