在循环内错误使用函数定义(js的问题)

考虑下面代码:

html 复制代码
var elements = document.getElementsByTagName('input');
var n = elements.length;    // Assume we have 10 elements for this example
for (var i = 0; i < n; i++) {
    elements[i].onclick = function() {
        console.log("This is element #" + i);
    };
}

根据上面的代码,如果有10input 元素,点击任何一个都会显示 "This is element #10"。 这是因为,当任何一个元素的onclick被调用时,上面的for循环已经结束,i的值已经是10了(对于所有的元素)。

我们可以像下面这样来解决这个问题:

html 复制代码
var elements = document.getElementsByTagName('input');
var n = elements.length;   
var makeHandler = function(num) { 
     return function() {  
         console.log("This is element #" + num);
     };
};
for (var i = 0; i < n; i++) {
    elements[i].onclick = makeHandler(i+1);
}

makeHandler 是一个外部函数,并返回一个内部函数,这样就会形成一个闭包,num 就会调用时传进来的的当时值,这样在点击元素时,就能显示正确的序号。

相关推荐
aklry5 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9313 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子13 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982414 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug16 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo16 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan16 分钟前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构
软件黑马王子21 分钟前
C#系统学习第八章——字符串
开发语言·学习·c#
阿蒙Amon23 分钟前
C#读写文件:多种方式详解
开发语言·数据库·c#
Da_秀31 分钟前
软件工程中耦合度
开发语言·后端·架构·软件工程