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>
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>
- i think its refreshing maybe you should use preventDefault() – AzarJad Commented Mar 25, 2019 at 9:29
3 Answers
Reset to default 2Try:
document.getElementById('hide').style.cssText = "display: block;";
OR
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')