通过 addEventListener 传递变量答案

【问题标题】：Passing variables through addEventListener通过 addEventListener 传递变量
【发布时间】：2019-10-15 20:51:03
【问题描述】：

我正在尝试向所有输入添加事件，从中获取值（数字）并将它们插入到 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
    })
}

【问题讨论】：

两件事：如果您希望您的输入对于循环的每次迭代都是唯一的，请使用 let 将其限制在该块范围内（否则每个事件侦听器都会知道最后一个输入） .但是，您最好使用event.target.value 并将名为event 的参数添加到您的处理函数（又名addEventListener('click', function(event){})）
那么你的代码有什么问题？会发生什么？
看看我放在addEventListener之后的console.log。控制台日志看不到变量。
用let 替换for（包括在声明中）中的var 的每个实例并报告回来。 var 的作用域不同，因此会更改所有循环的值，而 let 仅在块中，因此稳定在循环中。
好的。成功了，谢谢！但是我将如何使用 var 来做到这一点？有可能吗？我只是好奇。

标签： javascript variables addeventlistener innerhtml

【解决方案1】：

这里的问题与变量的范围有关。 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

【讨论】：

结果很难打字，因为这有很多细微差别，但总的来说我觉得这指出了问题所在。阅读var、let 和const，并尽可能避免使用var，因为它有很多缺点。它目前主要是为了与旧版浏览器兼容。

【解决方案2】：

好的。我已经使用 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;
    })
}

【讨论】：