从 Javascript 事件处理程序引用文档范围答案

【问题标题】：Referencing the document scope from a Javascript Event Handler从 Javascript 事件处理程序引用文档范围
【发布时间】：2018-11-25 21:33:18
【问题描述】：

我在表单控件（输入类型号）上有一个非常简单的事件处理程序（更改），我想根据输入的值做一些工作。这非常适合使用“this”关键字。

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

例如;

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

效果很好，但是；

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

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

【问题讨论】：

你缺少括号。

标签： javascript

【解决方案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
})()

【讨论】：