通过 addEventListener 传递变量

Question

我正在尝试向所有输入添加事件，从中获取值（数字）并将它们插入 span 元素。

这是我的 javascript 代码。我不知道如何传递变量。

var input_selector = document.querySelectorAll('.coins_n'); // input number elements
var price_selector = document.querySelectorAll('.price'); // span elements

for(var i = 0; i <= input_selector.length; i++) {
    var input = input_selector[i];
    var price = price_selector[i];

    input.addEventListener('input', function(){
        console.log(price); // not working
        console.log(input); // not working
        price.innerHTML = input.value; // not working
    })
}

Answer 1

好的。我通过使用 let.

来管理它

var input_selector = document.querySelectorAll('.coins_n');
var price_selector = document.querySelectorAll('.price');

for(var i = 0; i < input_selector.length; i++) {
    let input = input_selector[i];
    let price = price_selector[i];

    input_selector[i].addEventListener('input', function(){
        price.innerHTML = this.value;
    })
}

Answer 2

这里的问题与变量的作用域有关。 var 是一个奇怪的，它的范围并不真正限于 block，而是包含 function。下面两个（本质上）是一样的：

var input;
var i = 0;

for(; i < input_selector.length; i++) input = input_selector[i];

和

for(var i = 0; i < input_selector.length; i++) var input = input_selector[i];

两者都在全局范围内创建一个名为 input 的变量，然后更新该变量。这意味着任何想要稍后读取 input 的函数将只读取 input 的最新版本，而不是您定义稍后将触发的处理程序时的版本。

然而，

let 是 block 范围的，而你的 for 循环是一个块。因此，在 for 循环中定义 let input 将意味着为循环的每次迭代定义唯一的输入，因为每次执行该块时，都会为其中的所有内容创建一个新范围。

for 循环中的 var i = 0 也是如此 - 稍后调用它的任何处理程序将只记录 i 的最后一个全局值，但如果你使用 let，事实并非如此，循环的每次迭代都有自己的 i。所以你的代码可以简单地简化为：

const input_selector = document.querySelectorAll('.coins_n');
const price_selector = document.querySelectorAll('.price');

for( let i = 0; i < input_selector.length; i++ ){

    input_selector[i].addEventListener('input', event => {

        price_selector[i].innerHTML = event.target.value;

    });

}

一旦你开始输入它，解释起来就非常复杂，所以最好阅读其他人已经在 MDN 之类的地方写的东西：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

通过 addEventListener 传递变量

Passing variables through addEventListener

javascript

variables

innerhtml

addeventlistener