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

I am writing my first JavaScript program... well my first program. It's a little dice rolling game. Part of what I need to happen is display some of the results of the game in a table that is hidden. Currently when the function is executed the table flashes for a brief second and then is hidden again. I am using style="display:none" and style.display = "block" Does anyone know what is causing this issue? Thanks!

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>

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>

Share Improve this question asked Mar 25, 2019 at 5:52 TuCraiN 431 silver badge6 bronze badges

i think its refreshing maybe you should use preventDefault() – AzarJad Commented Mar 25, 2019 at 9:29

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

Try:

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

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

add in html onsubmit=rolldice(event) and in javascript function rolldice(e){e.preventDefault();}

u can use css class Instead of style

.dnone {
display : none;
}

.dblock {
 display :block;
}


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

and javascript will be :

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

element.classList.remove("dnone");

or simply use jquery

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

Programmer puzzle solving

javascript - document.getElementById().style.display = 'block'; Not working - Stack Overflow

3 Answers 3

Articles related to this article

comment list (0)