根据 HTML 输入的值更新变量的值 [重复]

Question

我有一个只接受数字的 HTML 输入，在我的脚本文件中我有一个变量来获取输入的值。我想要做的是创建另一个等于第一个变量的变量。当我在输入字段上输入数字时，numInput 变量的值会发生变化，但不会在
value 变量上发生变化。
编辑 我想做的是，我想在我将要制作的一些函数上使用value 变量的值。

const numInput = document.getElementById("input");
const value = numInput.value;

<header> 
   <input type="number" name="numInput" id="input" class="input" min="0" value="1" required>
</header>

Answer 1

value 没有改变的原因是因为它在分配期间保存了numInput.value 内容的副本，而不是指针或引用（我认为您无法在 JS 上执行此操作）。我建议按照@Sebastian Simon 的建议仅使用.valueAsNumber。

Answer 2

JS 对象是 JS 中唯一不会在赋值给新变量时克隆的东西。这包括数组。

因此，为了模仿这种行为，您需要在每次更改时更新您的值，通常是通过添加一个事件侦听器。我选择使用 change 事件，如果值已更改涉及键盘的字段和选择/更改范围/日期（如果值已更改），则该事件只会在模糊时触发，但您可以使用 input 事件如果您也希望它在每次按键时都发生变化。快速阅读：

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

这样做时，value 也不能是常量，因为它会改变，所以它必须是一个变量。我选择了let 声明以获得更好的代码隔离，但如果您需要更大的灵活性，请务必使用var。

const numInput = document.getElementById("input");
let value = numInput.value;

numInput.addEventListener('change', () => {
    value = numInput.value;
});

Answer 3

为了实现这一点，JavaScript 需要在 HTML 元素的输入值发生变化时触发一个函数。为此，需要一个事件监听器。

尝试更改输入值，以便您可以看到正在运行的代码：

document.getElementById("input").addEventListener('input', function(){
    let inputNumber = this.value
    console.log('your variable value is: ' + inputNumber)
})

<header> 
   <input type="number" name="numInput" id="input" class="input" min="0" value="1" required>
</header>