uncaught type error cannot set property 'innerHTML' of null

Question

I'm about to get final exam, this is the practice thing.

Please help me get throug it, i have got stuck here for a long time.

This is the question.

Look at the JavaScript program for this problem. It already contains a function called rollDie which returns a number between 1 and 6.

There are two buttons on the html document for player 1 and player 2 to click to roll a die.

When player one clicks the ‘Player 1 Roll’ button the onclick attribute should call the function playerOne which calls the rollDie function and stores the returned result in a variable.

When player two clicks the ‘Player 2 Roll’ button the onclick attribute should call the function playerTwo which calls the rollDie function and stores the returned result in a variable.

The two results should be displayed in the corresponding divs with id ‘playerOneResult’ and id ‘playerTwoResult’. Once both players have had a turn, the program should compare their results and display a message in another div with id ‘message’.

For example: If Player 1’s roll is a 3 and Player 2’s roll is a 4, the message displayed should be “Player Two wins”.

This is JS code

    //Declare the variables
    var playerOneNumber = 0;
    var playerTwoNumber = 0;

    //Functions
    function rollDie()
    {
        //create a random integer between 1 and 6
        var randomSide = Math.floor( Math.random() * 6 ) + 1;
        return randomSide
    }


    function PlayerOne()
    {
        var playerOneNumber = rollDie();
        return playerOneNumber;
    }   
        var playerOneNumber = PlayerOne();
        var playerOneR = document.getElementById("playerOneResult").innerHTML = playerOneNumber;




    function PlayerTwo()
    {
        var playerTwoNumber = rollDie();
        return playerTwoNumber;
    }   
        var playerTwoNumber = PlayerTwo();
        var playerTwoR = document.getElementById("playerTwoResult").innerHTML = playerTwoNumber;

    if(playerOneNumber > playerTwoNumber)
    {
        document.getElementById("message").innerHTML = "Player One wins";
    }
    else if(playerOneNumber < playerTwoNumber)
    {
        document.getElementById("message").innerHTML = "Player Two wins";
    }

This is HTML

    <body>
    <h2>Programming Project - Problem P</h2>
    <input type="button" id="player1" onclick="PlayerOne();" value="Player 1 Roll">
    <input type="button" id="player2" onclick="PlayerTwo();" value="Player 2 Roll">
    <p>Player One rolled a <span id="playerOneResult">***</span></p>
    <p>Player Two rolled a <span id="playerTwoResult">***</span></p>
    <p>Result: <span id="message">***</span></p>
    </body>

Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Sebastian Simon, Nov 15 '17 at 07:39
If there was an answer that helped you please consider voting it up to help future readers. — FutureCake, Nov 15 '17 at 14:32

score 0 · Answer 1 · answered Nov 15 '17 at 11:39

What happens is that your script runs before the HTML has completely loaded. So the elements you want the innerHTML of arent yet created. Try the following this prevents this from happening.

    var playerOnetrew = false;
    var playerTwotrew = false;

    //Functions
    function rollDie(){
        //create a random integer between 1 and 6
        var randomSide = Math.floor( Math.random() * 6 ) + 1;
        return randomSide
    }


    function PlayerOne(){
        document.getElementById("playerOneResult").innerHTML = rollDie();
        playerOnetrew = true;
        playerplayed();
    }   

    function PlayerTwo(){
        document.getElementById("playerTwoResult").innerHTML = rollDie();
        playerTwotrew = true;
        playerplayed();
    }   

    function playerplayed(){
        if(playerOnetrew && playerTwotrew){
            if(document.getElementById("playerOneResult").innerHTML > document.getElementById("playerTwoResult").innerHTML){
                document.getElementById("message").innerHTML = "Player One wins";
            }
            else if(document.getElementById("playerOneResult").innerHTML < document.getElementById("playerTwoResult").innerHTML){
                document.getElementById("message").innerHTML = "Player Two wins";
            }
        }
    }

<body>
    <h2>Programming Project - Problem P</h2>
    <input type="button" id="player1" onclick="PlayerOne();" value="Player 1 Roll">
    <input type="button" id="player2" onclick="PlayerTwo();" value="Player 2 Roll">
    <p>Player One rolled a <span id="playerOneResult">***</span></p>
    <p>Player Two rolled a <span id="playerTwoResult">***</span></p>
    <p>Result: <span id="message">***</span></p>
    </body>

let me know if you have any questions i tried to keep it as simple as possible. :)

uncaught type error cannot set property 'innerHTML' of null

1 Answers1