javascript 为什么输入的数字不能显示在控制台日志中，即使在数字输入addEventListener触发的函数的for循环之后？[duplicate]

dkqlctbz 于 2023-03-06 发布在 Java

关注(0)|答案(2)|浏览(146)

- 此问题在此处已有答案**：

JavaScript closure inside loops – simple practical example（44个答案）
14小时前关门了。
我有3个input的数字字段，我想在控制台日志中触发，每次我在3个input字段中输入一个数字，我已经为addEventListener添加了一个for循环，但是仍然有错误显示这个addEventListener部分不是一个函数，我想问一下，对于要实现的代码，我遗漏了什么？
太感谢你了!
超文本：

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

联森：

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

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

JavaScript

来源：https://stackoverflow.com/questions/75644908/why-cant-the-input-numbers-be-displayed-in-console-log-even-after-a-for-loop-fo

2条答案

按热度按时间

pb3skfrl1#

打字错误，elementsByTagName中缺少复数s
此外，console.log(val[i].value);在您使用的eventListener中也是未知的。
要解决这个问题你可以

val[i].addEventListener("input", function() {
    console.log(this.value); // "this" is available because we use function 
});

或

val[i].addEventListener("input", (e) => {
    console.log(e.target.value); // "this" is NOT available in an arrow function
});

下面是使用委托的一种更优雅的方法
注意DOMContentLoaded-当页面加载了所有HTML时触发
一个二个一个一个

赞(0）回复(0）举报 2023-03-06

qcbq4gxm2#

你的问题是在你的事件处理器中，val数组没有被定义。你应该阅读闭包来了解为什么会这样。
要解决您的特定问题，您可以进行以下更改-事件处理程序应接受event参数，该参数包括currentTarget属性，在本例中，该属性将是触发事件的<input>元素。

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

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

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

赞(0）回复(0）举报 2023-03-06

我来回答

javascript 为什么输入的数字不能显示在控制台日志中，即使在数字输入addEventListener触发的函数的for循环之后？[duplicate]

2条答案

相关问题

热门标签

最新问答