从Javascript事件处理程序引用文档作用域

Question

I have a very simple event handler (change) on a form control (input type-number) and I want to do some work based on the value entered. This works great with use of the 'this' keyword.

I'm running into a scope problem when I try to also check the value of another control (another input type-number). I understand this is a scope issue but I just can't figure out how to reference the second control from the event handler of the first.

So for instance;

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

Works great, but;

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

Fails. As I indicated, I realize this document object is out of scope, but I don't know the syntax to reference it (I presume there is a way).

Answer 1

Just save the reference to the input element at a higher scope, here is an example:

 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"> 

If you don't want the variables to be at global scope you can put it in an immediately invoked function expression:

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