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

Score field in html text acts as string when trying to = -= values

本文关键字：字段 字符串 html 值时 文本      更新时间：2023-09-26

我试着做一个记分牌，它奇怪地添加数字:

我的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>

这和它是字符串而不是整型有关系吗?我很困惑为什么在相同的标记下，负的分数可以工作，而正的分数不能。

您正在连接一个字符串…您需要首先将当前分数转换为数字-尝试这样做:

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

时

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

减分数比加分数效果更好的原因是+操作符对字符串(如innerHTML)重载，表示字符串连接，而-操作符没有重载，对字符串没有任何特殊含义。

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

但是，score.innerHTML -= 10将选择适用于数值的-操作符的含义，因此它被迫尝试将innerHTML值强制转换为数值(它可以成功地做到这一点)并从该值中减去10，然后在将结果赋值给score.innerHTML时将结果转换回字符串。事实上，你甚至可以在减法表达式的10后面加上引号，它仍然会工作，它只是试图把它转换回一个数字。如果分数。innerHTML恰好是一个不能转换为数字的字符串，如"abc"，那么该字符串将被转换为NaN，减法将得到NaN，当分配给innerHTML值时，NaN将被转换为字符串"NaN"。

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

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

是的，因为"current"的值实际上是一个字符串，所以+=只会将它认为是两个字符串的值加在一起。

在对其进行任何数学运算之前，您需要解析该值，参见下面的示例，其中包括在使用parseInt()之前检查它是否为数字:

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

相关文章：