Im having trouble making this work and I cant find the loose end. Im trying to make it so when I put a certain amount of rolls in, it outputs as that many rolls and records the data. But when I click the button, nothing happens.
<html>
<head>
<meta charset="utf-8" />
<title>Rollstats</title>
<script src="http://compsciconcepts.com/random.js"></script>
<script>
function Roll() {
roll1 = RandomInt(1, 6);
roll2 = RandomInt(1, 6);
if (roll1 == roll2) {
doubleSpan.innerHTML = Number(doubleSpan.innerHTML) + 1;
} else if (roll1 + roll2 == 7) {
sevenSpan.innerHTML = Number(sevenSpan.innerHTML) + 1;
if (roll1 == 3 || roll1 == 4) {
naturalSpan.innerHTML = Number(naturalSpan.innerHTML) + 1;
}
}
}
function ResetCounts() {
doubleSpan.innerHTML = 0;
sevenSpan.innerHTML = 0;
naturalSpan.innerHTML = 0;
}
</script>
</head>
<body style="text-align: center">
<h1>Dice Simulations</h1>
<p>
Desired number of rolls:
<input type="number" id="desiredBox" min="0" max="9999999" value="1000" />
<button onclick="Roll();">Click to Roll</button>
<button onclick="ResetCounts();">Reset Counts</button>
</p>
<hr />
<p>Number of doubles: <span id="doubleSpan">0</span></p>
<p>Number of sevens: <span id="sevenSpan">0</span></p>
<p>Number of Natural sevens:<span id="naturalSpan">0</span></p>
</body>
</html>you can't just call doubleSpan.innerHTML you need to get the element first:
doubleSpan = document.getElementById('doubleSpan');
doubleSpan.innerHTML = "..."