HTML体育赛事计分板实现单数字显示的JS代码修改问题

你只需要在每次更新分数后，通过模运算将数值限制在0-9区间即可，同时要处理减分时出现负数的特殊情况，避免模运算得到负的余数。

核心逻辑说明 #

• 加/减分后统一使用(clicks % 10 + 10) % 10计算最终展示值，该公式可以兼容正负数值，始终输出0-9之间的正整数：
  • 分数到10时：10%10=0，最终输出0
  • 分数到-1时：-1%10=-1，加10得9后再模10，最终输出9

修改后的完整代码 #

<script type="text/javascript">
var clicks = 0;
function helloup() {
    clicks += 1;
    // 模运算限制数值范围
    clicks = (clicks % 10 + 10) % 10;
    document.getElementById("clicks").innerHTML = clicks;
};
function hellodown() {
    clicks -= 1;
    // 模运算限制数值范围
    clicks = (clicks % 10 + 10) % 10;
    document.getElementById("clicks").innerHTML = clicks;
};
</script>

<em onClick="hellodown()">Blue</em>
<strong id="clicks">0</strong>
<i onClick="helloup()">Score!</i>

如果你不想修改clicks变量的原始值，只需要在赋值给innerHTML时做转换即可：
把document.getElementById("clicks").innerHTML = clicks;替换为document.getElementById("clicks").innerHTML = (clicks % 10 + 10) % 10;即可，其余代码不用变动。

内容的提问来源于stack exchange，提问作者user3807562