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

我在试着做一个记分板，它奇怪地增加了数字：

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

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

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

当前分数：
0100

或

当前分数：
-20100

---

这和它是字符串而不是int有关吗？我不明白为什么在相同的标记下负数有效而正数无效。

连接字符串。。。您需要先将当前分数转换为一个数字-尝试以下方法：

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（）

和基数时

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

---

您正在连接字符串。。。您需要先将当前分数转换为一个数字-尝试以下方法：

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（）

和基数时

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

---

innerHTML是一个字符串。可以使用

parseInt

在递增之前将其转换为整数。

innerHTML是一个字符串。您可以使用

parseInt

在递增之前将其转换为整数。

是的，这是因为“current”的值实际上是一个字符串，所以+=只需将它认为是两个字符串的值相加即可

您需要先解析该值，然后才能对其进行任何计算，请参见此问题的示例，其中包括在使用parseInt（）之前检查该值是否为数字：

---

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

您需要先解析该值，然后才能对其进行任何计算，请参见此问题的示例，其中包括在使用parseInt（）之前检查该值是否为数字：

---

减去分数比添加分数效果更好的原因是

+

运算符对字符串重载（例如

innerHTML

）表示字符串连接，而

-

运算符对字符串没有任何特殊意义

因此，

score.innerHTML+=100

将选择应用于字符串的

+

运算符的重载，并将100隐式转换为字符串，并将“100”附加到当前分数字符串值

但是，

score.innerHTML-=10

将选择应用于数值的

-

运算符的含义，因此它被迫尝试将innerHTML值强制转换为数值（它可以成功执行），并从该值中减去10，然后将结果赋给

score.innerHTML

时，将结果转换回字符串。事实上，你甚至可以在减法表达式中的10周围加上引号，它仍然可以工作，它会尝试将其转换回一个数字。如果score.innerHTML恰好是一个无法转换为数字的字符串，如“abc”，则该字符串将转换为

NaN

，减法将产生NaN，当分配给innerHTML值时，该值将转换为字符串“NaN”

---

正如对此问题的其他答案所述，使用

parseInt

是强制

+=

运算符的两个操作数都是数字的好方法，因此，确保执行加法而不是字符串连接。

减法分数比添加分数效果更好的原因是

+

运算符重载字符串（例如

innerHTML

）以表示字符串连接，而

-

运算符不会重载字符串的任何特殊含义

因此，

score.innerHTML+=100

将选择应用于字符串的

+

运算符的重载，并将100隐式转换为字符串，并将“100”附加到当前分数字符串值

但是，

score.innerHTML-=10

将选择应用于数值的

-

运算符的含义，因此它被迫尝试将innerHTML值强制转换为数值（它可以成功执行），并从该值中减去10，然后将结果赋给

score.innerHTML

时，将结果转换回字符串。事实上，你甚至可以在减法表达式中的10周围加上引号，它仍然可以工作，它会尝试将其转换回一个数字。如果score.innerHTML恰好是一个无法转换为数字的字符串，如“abc”，则该字符串将转换为

NaN

，减法将产生NaN，当分配给innerHTML值时，该值将转换为字符串“NaN”

---

正如对此问题的其他答案所述，使用

parseInt

是一种很好的方法，可以强制

+=

运算符的两个操作数都是数字，从而确保执行加法而不是字符串串联。

很好的解释！显然，因为javascript被延迟并被+重载，所以它的工作方式与-xD不同。我想知道如果混合使用*和/，结果会是什么。使用*和/运算符将得到与减法表达式相同的结果，因为这些运算符对于字符串值没有重载。请注意+运算符为ove

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;
}