如何增加輸入字段的值？

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 function 我想用 2 (base-life + 2) 點擊它的所有內容來增加基礎壽命

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

現在這只會將輸入字段的值加 2，使其變為 202。我知道當其中一個數字實際上是字符串時會發生這種情況。 也許我的charlife。 我嘗試了一切，但情況變得更糟。 我試過 parseInt(charlife.value) - 沒有運氣。 我嘗試了其他方法，但它不起作用。 我只有輸入字段有這個問題。 當元素只是一個或另一個更簡單的 html 元素時 - 這一切都更容易。 與 JS 如何解析輸入字段有關。 有人可以闡明一下嗎？

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

Answer 2

這是帶有一些根據您的規范的自定義代碼的工作片段

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