未捕获的类型错误无法将属性“innerHTML”设置为 null答案

【问题标题】：uncaught type error cannot set property 'innerHTML' of null未捕获的类型错误无法将属性“innerHTML”设置为 null
【发布时间】：2017-11-15 07:36:29
【问题描述】：

我马上就要期末考试了，这是练习题。

请帮我解决一下，我卡在这里很久了。

这是问题。

查看这个问题的 JavaScript 程序。它已经包含一个名为 rollDie 的函数，它返回一个介于 1 和 6 之间的数字。

在 html 文档中有两个按钮供玩家 1 和玩家 2 单击以掷骰子。

当玩家一点击“Player 1 Roll”按钮时，onclick 属性应该调用函数 playerOne，该函数调用 rollDie 函数并将返回的结果存储在一个变量中。

当玩家二点击“Player 2 Roll”按钮时，onclick 属性应该调用函数 playerTwo，该函数调用 rollDie 函数并将返回的结果存储在一个变量中。

这两个结果应该显示在id为“playerOneResult”和id为“playerTwoResult”的相应div中。一旦两个玩家都轮到了，程序应该比较他们的结果并在另一个 div 中显示一条 id 为“message”的消息。

例如：如果玩家 1 的掷骰结果为 3，而玩家 2 的掷骰结果为 4，则显示的消息应为“玩家 2 获胜”。

这是JS代码

    //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";
    }

这是 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>

【问题讨论】：

Why does jQuery or a DOM method such as getElementById not find the element?的可能重复
如果有对您有帮助的答案，请考虑投票以帮助未来的读者。

标签： javascript html

【解决方案1】：

发生的情况是您的脚本在 HTML 完全加载之前运行。所以你想要的innerHTML的元素还没有创建。请尝试以下操作，以防止这种情况发生。

    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>

如果您有任何问题，请告诉我，我尽量保持简单。 :)

【讨论】：