为什么增量被放在我想要增加的值旁边

Question

我试图在单击按钮时将 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>

Answer 1

您从中获取的值innerHTML是一个字符串，因此当您+=向字符串添加（使用 ）某些内容时，它会连接原始字符串的末尾。快速修复可以使用Number方法：function Cash() {&nbsp; &nbsp; var x = Number(document.getElementById("money").innerHTML);&nbsp; &nbsp; x += 100;&nbsp; &nbsp; document.getElementById("money").innerHTML = x;}<div class="col-6 balance">&nbsp; &nbsp;<h1 id="money" value="0">0</h1></div><button onclick="Cash()">Increase</button>

Answer 2

您没有获得预期结果的原因+=是由于两者innerHTML都innerText返回字符串而不是数字。所以你的代码正在'0'+'100'将 100 转换为字符串。如果您在添加之前转换为数字，事情将按预期工作。function cash() {&nbsp; &nbsp; var x = document.getElementById("money").innerText;&nbsp; &nbsp; x = parseInt(x, 10);&nbsp; &nbsp; x += 100;&nbsp; &nbsp; document.getElementById("money").innerHTML = x;}cash()<div class="col-6 balance">&nbsp; &nbsp;<h1 id="money" value="0">0</h1></div>