javascript - 从 Javascript 事件处理程序引用文档范围

Question

我在表单控件(输入类型编号)上有一个非常简单的事件处理程序(更改)，我想根据输入的值做一些工作。这在使用“this”关键字时效果很好。

当我尝试同时检查另一个控件(另一个输入类型编号)的值时，我遇到了范围问题。我知道这是一个范围问题，但我只是不知道如何从第一个事件处理程序中引用第二个控件。

例如;

if (this.value) != "" { do something }

效果很好，但是；

if (this.value != "" && document.getElementById("someothercontrol").value) != "") { do something else }

失败。正如我所指出的，我意识到这个文档对象超出了范围，但我不知道引用它的语法(我想有办法)。

Answer 1

只是在更高的范围内保存对输入元素的引用，这里是一个例子:

const inputs = document.querySelectorAll('input');
const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');

for (let input of inputs) {
  
  input.addEventListener('change', () => {
    
    console.log(input1.value);
    console.log(input2.value);
    
  })
}

<input id="input1" type="text">
<br>
<input id="input2" type="text">

如果您不希望变量处于全局范围内，您可以将其放在立即调用的函数表达式中:

(() => {
   // your scoped code here
})()