Question

我正在编写我的第一个JavaScript程序...我的第一个程序。这是一个小骰子滚动游戏。我需要做的部分工作是在隐藏的表中显示游戏的一些结果。当前，执行该功能时，表格会闪烁一秒钟，然后再次隐藏。我正在使用style="display:none"和style.display = "block"有人知道导致此问题的原因吗？谢谢！

function rollDice() {
    let bet = document.getElementById("startingBet").value;
    let rollCount = 0;
    if (bet <= 0) {
      alert("You must place a bet");
    } 
    else {
        let gameMoney = bet;
    while (gameMoney > 0) {        
        let snake = Math.floor(Math.random() * 6) +1;
        let eyes = Math.floor(Math.random() * 6) +1;
        let total = snake + eyes;
        rollCount++;
        console.log(gameMoney);
        console.log(rollCount);
        if (total == 7) {
            gameMoney = gameMoney + 4;
        }
        else {
            gameMoney--;
        }
    }
     if (gameMoney <= 0)  {
         alert("Game Over")
     }

    }
    document.getElementById("hide").style.display = 'block';
    document.getElementById("startBet").innerText = "$" + bet;
}

<!DOCTYPE html>
<html>
<head>
    <title>Lucky Sevens</title>

    <style type="text/css">

        #startingBet {
            width: 50px;
        }

    </style>

</head>


<body>
    <main>
        <header>
            <center><h1>Lucky Sevens</h1></center>
        </header>

        <form action="luckysevens.html" onsubmit="rollDice()">
            <center><p>Starting Bet: <input type="number" placeholder="$0.00" id="startingBet" step="0.01"/></p>
            <input type="submit" id="play" value="Play" /></center>
        </form>




        <div id="hide" style="display:none;">
            <hr width="25%">
            <table id="results"  align="center" >
                <thread>
                    <caption><h2>Results</h2></caption>
                    <tr>
                        <th>Starting Bet</th>
                        <th><span id="startBet"></span></th>
                    </tr>
                </thread>
                <tbody> 
                    <tr>
                        <td>Total Rolls Before Going Broke</td>
                        <td><span id="totalRolls"></span></td>
                    </tr>
                    <tr>
                        <td>Highest Amount Won</td>
                        <td><span id="pinacle"></span></td>
                    </tr>
                    <tr>
                        <td>Roll Count at Highest Amount Won</td>
                        <td><span id="highRollCount"></span></td>
                    </tr>
                </tbody>
            </table>
        </div>


    <script src="luckysevens.js"></script> 

    </main>
</body>
</html>

Answer 1

添加html onsubmit = rolldice（event）和javascript函数rolldice（e）{e.preventDefault（）;}

Answer 2

尝试：

document.getElementById('hide').style.cssText = "display: block;";

OR

document.getElementById('hide').setAttribute("style", "display: block;");

Answer 3

u可以使用CSS类代替样式

['+StackOverFlow', '@python', '!test']

和javascript将是：

.dnone {
display : none;
}

.dblock {
 display :block;
}


<div id="hide" class="dnone">

或仅使用jquery

var element = document.getElementById("hide");
element.classList.add("dblock");

element.classList.remove("dnone");

document.getElementById（）。style.display ='block';不工作

3 个答案: