Question

我无法弄清楚为什么CSS从display更改为：none to block不起作用。

我在浏览器中收到错误：“未捕获的TypeError：无法读取属性'样式'的null”。

这是我感到困惑的一句话：

if(running2 >= 100){
    document.getElementById('finishedAlert').style.display = 'block';
}

对我来说这是有道理的，当running2变量大于或等于100px时会触发浏览器错误。谢谢你的帮助。

 <!DOCTYPE html>
    <html>
    <head>
    
    <style>
    body {font-family: arial;}
    #container {width:100%;}
    .content {width:900px;margin: 0 auto;}
    h1, h2, button {clear:both;}
    h1 {font-size:18px; color:#111;}
    h2 {font-size:16px; color:#777;}
    button {display:block; background-color: #ddd; border: none; padding: 10px 28px;margin-bottom:20px;font-size:14px;outline:none;outline:0;cursor: pointer;}
    div.dice{
        float:left;
        color: #fff;
        width:32px;
        background:#111;
        padding:10px;
        font-size:18px;
        font-weight: bold;
        text-align:center;
        margin:10px 10px 10px 0;
    }
    .track {
        width:105px;min-width:105px;height:5px;max-height: 5px; background-color: #777;
    }
    .man {
        height:30px; width:5px;max-height: 30px; background-color: #111;margin-top: 40px;margin-bottom: 3px; position: relative;
    }
    .finished {display:none;color:red;}
    </style>
    
    <script>
    
    var running2 =null;
    
    function rollDice(){
    
        var die1 = document.getElementById("die1");
        var die2 = document.getElementById("die2");
        var status = document.getElementById("status");
        var status2 = document.getElementById("status2");
        var status3 = document.getElementById("status3");
    
        var d1 = Math.floor(Math.random() * 6) + 1;
        var d2 = Math.floor(Math.random() * 6) + 1;
        var diceTotal = d1 + d2;
    
        die1.innerHTML = d1;
        die2.innerHTML = d2;
    
        var running3 = (diceTotal + running2);
        running2 = running3;
    
        status.innerHTML = "You rolled "+diceTotal;
        if(d1 == d2){
            status.innerHTML += " DOUBLES! You get a free turn!!";
        }
    
        status2.innerHTML = "The man has run " + running3 + " pixels so far";
        status3.innerHTML = "The man has " + (100 - running3) + " pixels left to run";
    
        document.getElementById('moveMan').style.left = running2 + 'px';
    
        if(running2 >= 100){
            document.getElementById('finishedAlert').style.display = 'block';
        }
    
    }
    
    </script>
    </head>
    
    <body>
    <div id="container">
        <div class="content">
            <h1>You get 10 rolls. You have to get the man to the finish line before or on the tenth roll.<br>The finish line is 100px away.<br>Good luck.</h1>
            <div id="die1" class="dice">0</div>
            <div id="die2" class="dice">0</div>
            <button onclick="rollDice()">Roll Dice</button>
            <h1 id="status"></h2>
            <h2 id="status2"></h2>
            <h2 id="status3"></h2>
            <h2 class="finished" id="finshedAlert">Finished!</h2>
    
            <div class="man" id="moveMan">
                
            </div>
    
            <div class="track">
    
            </div>
        </div>
    </div>
    </body>
    </html>

Answer 1

这只是一个错字，您在finshedAlert元素上拼错了ID（finishedAlert而不是<h2>）。无需担心。

无法理解为什么我的JavaScript if语句不起作用

1 个答案: