基于HTML输入值的变量更新值

Question

我有一个HTML输入，它只接受数字，而在我的脚本文件中，我有一个i变量，它获取输入的值。我想要做的是创建另一个等于第一个变量的变量。当我在输入字段中放置一个数字时，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

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 2

value不改变的原因是它在赋值期间保存了numInput.value内容的副本，而不是指针或引用(我不认为您可以在JS上这样做)。我建议只使用@Sebastian建议的.valueAsNumber。

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>

​