Question

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

我的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吗？我很困惑为什么负面得分有效，而正面无效则为同一标记..

Answer 1

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

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()并使用基数

时

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

Answer 2

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

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

但是，score.innerHTML -= 10将选择适用于数值的-运算符的含义，因此它被迫尝试将innerHTML值转换为数值（它可以成功执行））并从该值中减去10，然后在将结果分配给score.innerHTML时将结果转换回字符串。事实上，您甚至可以在减法表达式中将10周围的引号括起来，它仍然有效，它只会尝试将其转换回数字。如果score.innerHTML恰好是一个无法转换为数字的字符串，如“abc”，那么该字符串将转换为NaN，并且减法将导致NaN，这将被转换为字符串“NaN”在分配给innerHTML值时。

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

Answer 3

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

Answer 4

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

您需要在使用它进行任何数学运算之前解析该值，请参阅此问题以获取一个示例，其中包括在使用parseInt（）之前检查它是否为数字：

how to parse string to int in javascript

当尝试= - =值时，html文本中的得分字段充当字符串

4 个答案: