0

我试图制作一个记分板，并且奇怪地添加了数字：

我的html：

<div id="game-info">
   Top score: <p id="top-score">0</p><br>
    Current score: <p id="current">0</p><br>
    Games played: <p id="played-games">0</p>
</div>

我的JavaScript：

var score = document.getElementById("current");
if(blabla scored points){
     score.innerHTML += 100;
}
if(blabla scored -points){
    score.innerHTML -= 10;
}

减分效果很好，至少它是负数，但正数会在当前分数上添加到末尾，如下所示：

Current score: <p id="current">0100</p><br>

或者

Current score: <p id="current">-20100</p><br>

这与它是一个字符串而不是一个int有什么关系吗？我很困惑为什么负分有效而正分在相同标记时不起作用。

4

4 回答 4

3

你连接一个字符串......你需要先将当前分数转换为一个数字 - 尝试这样的事情：

var score = document.getElementById("current");
if(blabla scored points){
     // parse current score as integer and then add 100
     score.innerHTML = parseInt(score.innerHTML,10) + 100;
}
if(blabla scored -points){
    // parse current score as integer and then subtract 10
    score.innerHTML = parseInt(score.innerHTML,10) - 10;
}

parseInt()将字符串解析为整数

额外说明：使用parseInt()和使用基数时

一个整数，表示上述字符串的基数。始终指定此参数以消除读者混淆并保证可预测的行为。当未指定基数时，不同的实现会产生不同的结果。

于 2013-03-27T11:33:25.467 回答
1

减去分数比添加分数效果更好的原因是运算+符重载了字符串（例如innerHTML）以表示字符串连接，而-运算符没有重载，对字符串有任何特殊含义。

因此，score.innerHTML += 100将选择+适用于字符串的运算符的重载并将 100 隐式转换为字符串并将“100”附加到当前分数字符串值。

但是，score.innerHTML -= 10将选择-适用于数值的运算符的含义，因此它被迫尝试将 innerHTML 值转换为数值（它可以成功）并从该值中减去 10，然后转换结果将结果分配给score.innerHTML. 实际上，您甚至可以在减法表达式中的 10 周围加上引号，它仍然可以工作，它也会尝试将其转换回数字。如果 score.innerHTML 恰好是一个不能转换为数字的字符串，比如“abc”，那么这个字符串会被转换为NaN，减法会得到 NaN，当被分配给 innerHTML 值。

正如该问题的其他答案所描述的， usingparseInt是强制运算符的两个操作数+=都是数字的好方法，从而确保执行加法而不是字符串连接。

于 2013-03-27T11:41:42.353 回答
0

innerHTML 是一个字符串。您可以parseInt在递增之前将其转换为整数。

于 2013-03-27T11:33:27.220 回答
0

是的，因为“current”的值实际上是一个字符串，所以 += 只会将它认为是两个字符串的内容相加。

您需要先解析该值，然后才能对其进行任何数学运算，请参阅此问题以获取示例，其中包括在使用 parseInt() 之前检查它是否为数字：

如何在javascript中将字符串解析为int

于 2013-03-27T11:35:06.723 回答