如何增加输入字段的值？

如何解决如何增加输入字段的值？

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

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

<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) 它被点击的所有东西来增加 base-life

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

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

解决方法

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>

,

这是带有一些符合您规范的自定义代码的工作片段

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