为什么将增量放在我要增加的值旁边[重复]答案

【问题标题】：Why is the increment being put beside the value I want to increment [duplicate]为什么将增量放在我要增加的值旁边[重复]
【发布时间】：2021-03-09 20:22:56
【问题描述】：

我试图在单击按钮时将 h1 标记中的数字简单地增加 100。我可以使用 ++ 运算符让它增加 1，但是当我尝试使用 += 运算符增加 100 时，它会将值放在初始值旁边，并且每次点击都会这样做，为什么会发生这种情况？

这是我的代码：

function Cash() {
    var x = document.getElementById("money").innerHTML;
    x += 100;

    document.getElementById("money").innerHTML = x;
}

<div class="col-6 balance">
   <h1 id="money" value="0">0</h1>
</div>
<button onclick="Cash()">Increase</button>

【问题讨论】：

Duplicate of Javascript ++ vs +=1。另见Difference between ++ and +=1 in javascript。

标签： javascript html

【解决方案1】：

您从innerHTML 获得的值是一个字符串，因此当您向字符串添加（使用+=）某些内容时，它会连接原始字符串的末尾。

快速修复可以使用Number方法：

function Cash() {
    var x = Number(document.getElementById("money").innerHTML);
    x += 100;
    document.getElementById("money").innerHTML = x;
}

<div class="col-6 balance">
   <h1 id="money" value="0">0</h1>
</div>
<button onclick="Cash()">Increase</button>

【讨论】：

【解决方案2】：

使用+= 未获得预期结果的原因是innerHTML 和innerText 返回的是字符串而不是数字。所以您的代码正在执行'0'+'100'，因为它将 100 转换为字符串。如果您在添加之前转换为数字，则将按预期工作。

function cash() {
    var x = document.getElementById("money").innerText;
    x = parseInt(x, 10);
    x += 100;

    document.getElementById("money").innerHTML = x;
}

cash()

<div class="col-6 balance">
   <h1 id="money" value="0">0</h1>
</div>

【讨论】：