循环完成后重置页面

Resetting a page after loop has finished

本文关键字：循环更新时间：2023-09-26

我正在创建一个骰子游戏。我正在尝试这样做，以便用户可以在循环后重新单击按钮以重置页面以再次播放。我的直觉告诉我涉及一个if语句，但经过几次尝试，我无法弄清楚如何设置它。我能够在按下按钮后更改按钮值以显示"再次播放"，我只需要在用户重新按下"再次播放"按钮后重新加载页面。任何帮助将不胜感激。

    <script>
        var rolls = new Array();
        var maxMoney = 0;
        var rollCountMoney = new Array();
        var count = 0;
        var startingBet = 0;
        var betStarter = new Array(); 
        var mostRoll = 0;   
        function rollDice() {
          do {
            count++;
            var userInput = parseInt(document.getElementById("bet").value);
            var wallet = userInput;
            var d1 = Math.floor(Math.random() * 6) + 1;
            var d2 = Math.floor(Math.random() * 6) + 1;
            var diceTotal = d1 + d2;
            rolls.push(diceTotal);
            rollCountMoney.push(wallet);
            if(wallet > maxMoney){
              maxMoney = wallet;
              mostRoll = count - 1; 
            }
            if(userInput > startingBet){
            betStarter.push(userInput);
            }
            if (diceTotal === 7) {
              document.getElementById("bet").value = wallet += 4;
              console.log("Round: " + count + " ,you rolled a " + diceTotal + "! You win $4 for a total of: " +wallet);
            } else {
              document.getElementById("bet").value = wallet -= 1;
              console.log("Round: " + count + " ,you rolled a " + diceTotal + "! You lose $1 for a total of: " +wallet);
            }
          } while (wallet > 0)  {}  
          var displayMsg = count;
          var highest = maxMoney;
          var highestRoll = mostRoll;
          document.getElementById("display").innerHTML = displayMsg;
           document.getElementById("starter").innerHTML = betStarter[0];
           document.getElementById("highPot").innerHTML = highest;
           document.getElementById("rollPot").innerHTML = highestRoll;
           var elem = document.getElementById("playAgain");
            if (elem.value=="Play Again"){ 
            elem.value = "Play";
            }else {elem.value = "Play Again";
            }
        }
    </script>
</head>
<body>          
    <div class="container-fluid">
        <div class="page-head"> 
            <h1 align="center">Lucky Sevens</h1>
        </div>
    </div>  
    <div class="container" align="center"> 
        <table class="table-responsive"> 
            <tr>
                <th><h3 align="center"><b>Lucky Sevens</b></h3></th>
            </tr>
            <tr>
                <td>
                    <form>
                        Starting Bet: 
                        <input id="bet" type="text"/>
                    </form>
                </td>   
            </tr>
            <tr>
                <td align="center">
                    <form>
                        <input type="button" id="playAgain" onclick="rollDice()" value="Play"></input>
                    </form>
                </td>
            </tr>
        </table>
        <div class="jumbotron" style="width:400px; position: relative; top: 40px">
            <table class="dicey" border="1" style="border-color: white">
                <caption ALIGN="top">
                    <h3 align="center" style="color: black"><b><u>Results</u></b></h3>
                </caption>          
                <tr>
                    <th style= "background-color: grey"><b>Starting Bet</b></th>
                    <th style= "background-color: grey" id="starter"></th>  
                </tr>
                <tr>
                    <td>Total rolls before going broke </td>
                    <td id="display"></td>
                </tr>
                <tr>
                    <td>Highest amount won </td>
                    <td id="highPot"></td>
                </tr>
                <tr>
                    <td>Roll count at highest amount won </td>
                    <td id="rollPot"></td>
                </tr>   
            </table>
        </div>  
    </div>

如果我正确理解了您的代码，您可以重新加载页面：

function rollDice(){
    if (document.getElementById("playAgain").value=="Play Again")
        location.reload();
    ...

或将其重置为初始状态：

function rollDice() {
    var rolls = new Array();
    var maxMoney = 0;
    var rollCountMoney = new Array();
    var count = 0;
    var startingBet = 0;
    var betStarter = new Array();
    var mostRoll = 0;
    document.getElementById("display").innerHTML = "";
    document.getElementById("starter").innerHTML = "";
    document.getElementById("highPot").innerHTML = "";
    document.getElementById("rollPot").innerHTML = "";
    ...

最简单的方法是添加第二个按钮再次播放，例如

<button id="play-again-button" style="display:none" onclick="location.reload()">play again</button >

然后在您需要时显示它

document.getElementById("play-again-button').style.display = "block";

如果要实际刷新页面。或者将该按钮的 onclick 绑定到重置内容的 js 函数。