javascript - 如何在 JavaScript 中为 "number"类型输入添加事件监听器？

Question

我希望能够向 HTML 中的“数字”输入添加一个事件监听器，以便当按下向上箭头时，变量可以增加 1，当按下向下箭头时，变量可以增加 1变量可以减少 1。

我目前正在使用这个:

const strength = document.querySelector('#Strength');
var ability_points = 0;

strength.addEventListener('change', () => {
    ability_points = ability_points+1;
})

因为我使用“更改”，所以我无法区分向上和向下箭头...

我认为这可能是一件非常简单的事情，但我只是找不到让它监听的内容。

Answer 1

您最好只使用元素的 .value 属性，而不是跟踪增量和减量。如果您只处理 1 的更改，那么如果用户将完全不同的数字复制并粘贴到字段中，您就会失去同步。试试这个:

let ability_points = 0;

const strength = document.querySelector('#Strength');
strength.addEventListener('change', () => {
  ability_points = strength.value;
  console.log(ability_points);
})

<input type="number" id="Strength" value="0" />