Question

我即将参加期末考试，这是练习。

请帮助我解决这个问题，我已经被困在这里很久了。

这就是问题。

查看JavaScript程序是否存在此问题。它已经包含一个名为rollDie的函数，它返回1到6之间的数字。

html文档上有两个按钮，供玩家1和玩家2单击以滚动骰子。

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

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

这两个结果应显示在id为'playerOneResult'且id'plalTwoResult'的相应div中。一旦两个玩家都转了，程序应该比较他们的结果并在另一个div中显示一条带有“消息”的消息。

例如：如果玩家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>

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

未捕获类型错误无法设置null

1 个答案: