如何增加输入字段的值？

Question

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

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

<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（基础寿命 + 2）点击的所有内容

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

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

Answer 1

这是工作片段，其中包含一些根据您的规范定制的代码

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

Answer 2

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>

如何增加输入字段的值？

How can I increase value of an input field?

javascript

increment

input-field