I am making an HTML based score board for a sports event. The number (0-9) will be showed on an iPad running this code:
<script type="text/javascript">
var clicks = 0;
function helloup() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
function hellodown() {
clicks -= 1;
document.getElementById("clicks").innerHTML = clicks;
};
</script>
<em onClick="hellodown()">Blue</em>
<strong id="clicks">0</strong>
<i onClick="helloup()">Score!</i>
This works great - expect I only want it always only to show 1 digit. Meaning when it reaches 10 it should so 0.
A friend of mine mentioned the use of modulus or remainder, but I can't figure out what is what and how it would go into the code.
Any help greatly appreciated.
There are multiple possible solutions:
var clicks = 0;
function helloup() {
clicks = (clicks + 1) % 10;
document.getElementById("clicks").innerHTML = clicks;
};
function hellodown() {
clicks = (clicks - 1) % 10;
document.getElementById("clicks").innerHTML = clicks;
};
Note:
hellodown will still result in -1,...,-9.
clicksvar clicks = 0;
function helloup() {
clicks += 1;
if(clicks >= 10) {
clicks = 1;
}
document.getElementById("clicks").innerHTML = clicks;
};
function hellodown() {
clicks -= 1;
if(clicks <= 0) {
clicks = 9;
}
document.getElementById("clicks").innerHTML = clicks;
};