如何增加输入字段的值？答案

【问题标题】：How can I increase value of an input field?如何增加输入字段的值？
【发布时间】：2021-01-04 19:15:07
【问题描述】：

困扰了我一段时间并且总是让我头疼的事情。

我有一个数值为数字的输入字段

<input id="base-life" class="base-stats" type="number" name="base-life" value="20" readonly />

我正在获取输入字段的值

let charlife = document.getElementById('base-life');

我有一个数字，我想用它来增加基本寿命输入字段的值。这当然会根据其他东西动态变化，但假设它是 2

let increaseWith = 2;

在一个 onclick 函数中，我想用 2 (base-life + 2) 它被点击的所有东西来增加基本寿命

function increase() {
    charlife.value += increaseWith;
}

现在这只会将输入字段的值加 2，使其变为 202。我知道当其中一个数字实际上是字符串时会发生这种情况。也许我的charlife。我尝试了一切，但情况变得更糟。我试过 parseInt(charlife.value) - 没有运气。我尝试了其他方法，但它不起作用。我只有输入字段有这个问题。当元素只是一个或另一个更简单的 html 元素时 - 这一切都更容易。与 JS 如何解析输入字段有关。有人能解释一下吗？

【问题讨论】：

输入的值是字符串，而不是数字。
您需要先解析该值，然后将其添加到增量中。
这能回答你的问题吗？ stackoverflow.com/questions/9186346/…

标签： javascript increment input-field

【解决方案1】：

let charlife = document.getElementById('base-life');
let increaseWith = 2;
function increase() {
     value = parseInt(charlife.value);
     value += increaseWith;
     charlife.value = value;
}

<input id="base-life" class="base-stats" type="number" name="base-life" value="20" readonly />
<button onclick="increase()">Increase</button>

【讨论】：

【解决方案2】：

这是工作的 sn-p，带有一些根据您的规范的自定义代码

<input id="base-life" class="base-stats" type="number" name="base-life" value="20" readonly />
<button class="add" onclick="let increaseWith = 2;document.getElementById('base-life').value = parseInt(document.getElementById('base-life').value)+increaseWith;">add</button>

【讨论】：

好的，所以 parseInt 仍然是我要走的路，但我不能像我一样使用 +=，尽管我可以。谢谢你。 Tiffany 的方法是使用 += 但使用附加变量。我有点纠结哪种方法更好。
在一行中也有一个赋值，所以我们不能同时使用+=和parseInt。我们需要将表达式分配给一个变量，然后将该变量分配给@Tiffany 已经完成的输入值