document.getElementById().style.display = 'block';不工作

Question

我正在编写我的第一个 JavaScript 程序……我的第一个程序。这是一个掷骰子的小游戏。我需要做的部分事情是在隐藏的 table 中显示一些游戏结果。当前，当函数执行时，table 会闪烁一秒钟，然后再次隐藏。我正在使用 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="[=14=].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

尝试：

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

或

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

Answer 2

你可以使用 css class 而不是样式

.dnone {
display : none;
}

.dblock {
 display :block;
}


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

和javascript将是：

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

element.classList.remove("dnone");

或简单地使用jquery

$("#hide").addClass('dblock').removeClass('dnone')

Answer 3

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

document.getElementById().style.display = 'block';不工作

document.getElementById().style.display = 'block'; Not working

javascript

css

display