= 100){" />

Не могу понять, почему мой JavaScript, если заявление не работает

javascript html css

53 просмотра

1 ответ

Я не могу понять, почему CSS меняется с дисплея: ни один блок не работает.

Я получаю сообщение об ошибке в своем браузере: «Uncaught TypeError: Невозможно прочитать свойство 'style' of 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>

Автор: user6737516 Источник Размещён: 08.11.2019 11:03

Ответы (1)


2 плюса

Это была просто опечатка, вы неправильно написали идентификатор ( finshedAlertа не finishedAlert) <h2>элемента. Не о чем беспокоиться.

Автор: Cristian Cristea Размещён: 20.08.2016 08:23
32x32