How to make a javascript load after other page elements are loaded?

Question

So I made this rock-paper-scissors game in HTML. when the page loads, it asks the user for their input through a pop-up. The problem is the popup loads before any of my divs and I want all my html elements to be visible before the popup script starts.

Here is my code:

<body>
    <div class="user">
        <div class="container">You choose:</div>
        <div id="userInput"></div>
    </div>
    <div class="computer">
        <div class="container">Computer chooses:</div>
        <div id="computerInput"></div>
    </div>
    <div class="results">
        <div class="container">Results:</div>
        <div id="resultsOutput"></div>
    </div>

    <script type="text/javascript">
            var userInput = prompt("Do you choose rock, paper or scissors?");
        var computerChoice = Math.random();
        if (userInput === "rock" || userInput === "paper" || userInput === "scissors") {
            var userChoice = userInput
        } else {
            userChoice = "Invalid entry, sorry. "
        }

        if (computerChoice < 0.34) {
            computerChoice = "rock";
        } else if (computerChoice <= 0.67) {
            computerChoice = "paper";
        } else {
            computerChoice = "scissors";
        }
        console.log("Computer: " + computerChoice);

        function compare(choice1, choice2) {
            if (userInput === "rock" || userInput === "paper" || userInput === "scissors") {
                if (choice1 === choice2) {
                    return "The result is a tie!";
                } else if (choice1 === "rock") {
                    if (choice2 === "scissors") {
                        return "rock wins";
                    } else {
                        return "paper wins"
                    }
                } else if (choice1 === "paper") {
                    if (choice2 === "rock") {
                        return "paper wins";
                    } else {
                        return "scissors wins";
                    }
                } else if (choice1 === "scissors") {
                    if (choice2 === "rock") {
                        return "rock wins";
                    } else {
                        return "scissors wins"
                    }
                }
            } else {
                return "Results not calculated."
            }
        }
        document.getElementById("userInput").innerHTML = userChoice;
        document.getElementById("computerInput").innerHTML = computerChoice
        compare(userChoice, computerChoice);
        document.getElementById("resultsOutput").innerHTML = compare(userChoice, computerChoice)

    </script>
</body>

I think you need to create a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) with emphasis here on minimal. — Liam, Oct 11 '16 at 16:17
TBF I removed the context to make the question easier to read. Rolled back and appologies — Liam, Oct 11 '16 at 16:24
Possible duplicate of [Javascript that executes after page load](http://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load) — Liam, Oct 11 '16 at 16:26

Danmoreng · Accepted Answer · 2016-10-11T16:30:59.043

Your javascript is executed before the rest of the page has been loaded

You are trying to use window.onload, but you are doing it wrong. window.onload should be a function, like this:

window.onload = function(){
    //your code here
}

But this only works if you only have ONE function you want to start on page load. In general it's better to use the window.addEventListener method, since you can use multiple of those and all will be executed.

If you would use another window.onload = function(){}, it would override the first one.

That's why I recomment using:

window.addEventListener('load',function(){
    //your code here
})

score 1 · Answer 2 · answered Oct 11 '16 at 16:28

Solution 1:

You could put your script at the bottom of the HTML document. This will run your code after the <div> elements have loaded:

<html>
<head></head>
<body>
    <div></div>
    <div></div>
    <div></div>
    ...
    <script>
        // Put your JS code here
    </script>
</body>
</html>
</html>

Solution 2: Additionally, you could put all your JS inside the window.onload event listener:

window.onload = function() {
    // Put your JS code here
};

score 0 · Answer 3 · answered Oct 11 '16 at 16:25

You can do three things.

Add your script tag just before your closing body tag in your html page.
Call your logic as part of your body onload event

document.body.onload = function() { console.log('I loaded!'); };
If you are using jquery, you can get the same result as above by doing the following:

$(function() { console.log('I loaded!'); })(jQuery);

Alex Thomsen · Answer 4 · 2016-10-11T16:52:46.057

Hero1134 is totally right if you use jQuery. If you're using jQuery though you should probably use

$(document).ready(function(){ })

The .ready function will execute as soon as the DOM is ready (html elements loaded and ready to be worked against). If you use .load you'll wait for every element on the page to load in its entirety so you'll have to wait for large images to wait to load. On some pages the difference between these two methods can be seconds!

You can also run your script at the end of the file instead

<body>
  <divs />
  <script>var userInput = prompt("Do you choose rock, paper or scissors?"); ...</script>
</body>

So the elements will be available to the script.

If you want to just use Plain Old javascript without dependencies and you'd like to include the js at the top of the file you can fix this line

window.onload = var userInput = prompt("Do you choose rock, paper or scissors?"); ...

To be this instead

window.onload = function(){ var userInput = prompt("Do you choose rock, paper or scissors?"); ... }

score 0 · Answer 5 · edited Oct 11 '16 at 16:28

0

You have two choices 1.In JavaScript you can do it like below syntax

document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

2.In Jquery do like this

$(document).ready(function(){
// your code here
});

edited Oct 11 '16 at 16:28

Liam

27,717
28
128
190

answered Oct 11 '16 at 16:28

Nitin Kumar

898
7
22

score 0 · Answer 6 · answered Oct 11 '16 at 16:38

Maybe you can try this...

<div id="quiz">
    <div class="user ">
        <div class="container">You choose:</div>
        <div id="userInput"></div>
    </div>
    <div class="computer">
        <div class="container">Computer chooses:</div>
        <div id="computerInput"></div>
    </div>
    <div class="results">
        <div class="container">Results:</div>
        <div id="resultsOutput"></div>
    </div>
</div>

<script type="text/javascript">


    window.onload = function(){

        if( document.getElementById('quiz') ){

            var userInput = prompt("Do you choose rock, paper or scissors?");
            var computerChoice = Math.random();
            if (userInput === "rock" || userInput === "paper" || userInput === "scissors") {
                var userChoice = userInput
            } else {
                userChoice = "Invalid entry, sorry. "
            }

            if (computerChoice < 0.34) {
                computerChoice = "rock";
            } else if (computerChoice <= 0.67) {
                computerChoice = "paper";
            } else {
                computerChoice = "scissors";
            }

            console.log("Computer: " + computerChoice);
            document.getElementById("computerInput").innerHTML = computerChoice;
            if( userChoice !== undefined ){
                 document.getElementById("userInput").innerHTML = userChoice;
                 compare(userChoice, computerChoice);
                 document.getElementById("resultsOutput").innerHTML = compare(userChoice, computerChoice)
            }

        }

    }


    function compare(choice1, choice2) {

        if (userInput === "rock" || userInput === "paper" || userInput === "scissors") {
            if (choice1 === choice2) {
                return "The result is a tie!";
            } else if (choice1 === "rock") {
                if (choice2 === "scissors") {
                    return "rock wins";
                } else {
                    return "paper wins"
                }
            } else if (choice1 === "paper") {
                if (choice2 === "rock") {
                    return "paper wins";
                } else {
                    return "scissors wins";
                }
            } else if (choice1 === "scissors") {
                if (choice2 === "rock") {
                    return "rock wins";
                } else {
                    return "scissors wins"
                }
            }
        } else {
            return "Results not calculated."
        }
    }


</script>

score -1 · Answer 7 · answered Oct 11 '16 at 16:17

-1

Use the function

 $(window).load(function () {

});

answered Oct 11 '16 at 16:17

Hero1134

189
9

What? Why? This makes no sense – Liam Oct 11 '16 at 16:18
2

ReferenceError `$` is undefined – Quentin Oct 11 '16 at 16:19
1

`window.addEventListener('load',function(){})` is the proper way. – Danmoreng Oct 11 '16 at 16:19
http://stackoverflow.com/questions/4584373/difference-between-window-load-and-document-ready-functions. Refer to this post for more information. Hope it helps. – Hero1134 Oct 11 '16 at 16:20
It still can work. I mean i am also using it right now on my end. Most of my code are in javascript. – Hero1134 Oct 11 '16 at 16:21
JQuery is just a library. Oh my god, i got downvoted for the right answer. – Hero1134 Oct 11 '16 at 16:24

score -1 · Answer 8 · answered Oct 11 '16 at 16:21

-1

You could use JQuery to load your HTML page before executing your JavaScript. Something similar to this could work.

$(document).ready(init);
function init(){
 //your JavaScript code here 
}

answered Oct 11 '16 at 16:21

Celaro

196
1
7
19

1

the answer to everything is not jQuery!! – Liam Oct 11 '16 at 16:22
I agree but I guess it is another way of doing it and thought it would help! – Celaro Oct 11 '16 at 16:25
I really don't understand. Isn't JQuery also a library of Javascript. – Hero1134 Oct 11 '16 at 16:28
It is a library of JavaScript that enables you to do the same thing but with fewer lines of code – Celaro Oct 11 '16 at 16:30
@Hero1134: It would be lunacy to load a bloated library just to make your code run when the DOM is ready. – Oct 11 '16 at 16:50
Celaro: Without jQuery, I'm able to write JS code that is just as short (sometimes shorter) and much faster. – Oct 11 '16 at 16:51

How to make a javascript load after other page elements are loaded?

8 Answers8