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

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

考虑下面代码:

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了(对于所有的元素)。

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

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 就会调用时传进来的的当时值,这样在点击元素时,就能显示正确的序号。

相关文章
|
4月前
|
JavaScript 前端开发
JS循环for、for...of、for...in
本文介绍了JavaScript中不同的循环语句,包括传统的`for`循环、`for...of`循环用于遍历数组和类数组对象、`for...in`循环用于遍历对象的属性,并通过示例代码展示了它们的用法和区别。
61 6
JS循环for、for...of、for...in
|
3月前
|
JavaScript 前端开发
js循环有几种
js循环有几种
54 0
|
2月前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
36 2
|
4月前
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
153 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
|
4月前
|
JavaScript 前端开发 索引
|
4月前
|
JavaScript
js 循环数组取值
js 循环数组取值
|
3月前
|
JavaScript
自动循环提交js
自动循环提交js
27 0
|
JavaScript 前端开发
kettle job通过javascript进行循环控制
任何一种编程语言都少不了循环,kettle中的job也一样。那么kettle中的job是怎么通过JavaScript来达到类似于编程语言中的for循环呢? var max = parent_job.
1588 0
|
2月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
38 1
JavaScript中的原型 保姆级文章一文搞懂