首页 > 解决方案 > 如何增加输入字段的值?

问题描述

有些事情困扰了我一段时间,总是让我头疼。

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

<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 如何解析输入字段有关。有人可以阐明一下吗?

标签: javascriptincrementinput-field

解决方案


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>


推荐阅读