循环绑定addEventListener后，数字输入无法打印且报错，该如何解决？

问题描述 #

拥有3个type="number"的<input>字段，期望每次在任意输入框输入数字时，控制台打印对应输入值。使用for循环为这些<input>元素绑定input事件时，出现“addEventListener不是函数”的错误，且输入值无法正常打印。

原始代码 #

HTML

<input type="number" id="no1">
<input type="number" id="no2">
<input type="number" id="no3">

JavaScript

const val = document.getElementsByTagName("input");

for (i = 0; i < val.length; i++) {
    val[i].addEventListener("input", () => {
        console.log(val[i].value);
    });
}

错误原因 #

1. 全局变量引发的闭包问题：循环中的i未用let/const声明，属于全局变量。循环结束后i的值变为3，此时val[3]是undefined。当input事件触发时，回调函数访问val[i].value，本质是访问undefined.value，会抛出错误，看起来像是addEventListener的问题，实际是回调执行时的变量引用错误。
2. 额外说明：getElementsByTagName返回的是动态HTMLCollection，但这不是核心问题，核心矛盾在于循环变量的作用域问题。

修复方案 #

方案1：用let声明循环变量，形成块级作用域 #

const val = document.getElementsByTagName("input");

for (let i = 0; i < val.length; i++) {
    val[i].addEventListener("input", () => {
        console.log(val[i].value);
    });
}

方案2：使用forEach遍历（需将HTMLCollection转为数组） #

const inputs = Array.from(document.getElementsByTagName("input"));

inputs.forEach(input => {
    input.addEventListener("input", () => {
        console.log(input.value);
    });
});

方案3：在回调中通过事件对象获取当前元素（最稳妥，不依赖循环变量） #

const val = document.getElementsByTagName("input");

for (let i = 0; i < val.length; i++) {
    val[i].addEventListener("input", (e) => {
        console.log(e.target.value);
    });
}

也可以改用普通函数，通过this获取当前元素：

const val = document.getElementsByTagName("input");

for (let i = 0; i < val.length; i++) {
    val[i].addEventListener("input", function() {
        console.log(this.value);
    });
}

说明 #

方案3的优势在于不依赖循环变量的引用，直接通过事件触发源获取值，彻底避免闭包带来的变量引用问题，是最推荐的写法。

内容的提问来源于stack exchange，提问作者Julia Andriessan