javascript中点击3个按钮弹出不同的值

最新推荐文章于 2024-06-30 16:14:54 发布

qq_35577652

最新推荐文章于 2024-06-30 16:14:54 发布

阅读量2.5k

点赞数

分类专栏：面试

本文链接：https://blog.csdn.net/qq_35577652/article/details/69568188

版权

面试专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一次面试遇到的，其实很简单

普通的（错误的）写法是这样的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button>1</button>
	<button>1</button>
	<button>1</button>
</body>
<script type="text/javascript">
	var btn=document.getElementsByTagName("button");
	function box() {
			for(var i=0; i<3; i++) {
					btn[i].onclick = function (){
					alert(i);
				}
				}
	}
	
	box();
</script>
</html>

但是这样的话，弹出来的都是3，这是因为js中var并不是一个块级作用域，

简单的解决办法

方法一：就是把var改成let，就okay啦啦啦啦

方法二：当然在没有es6的let之前，是要使用闭包解决的

	function box() {
		
			for(var i=0; i<3; i++) {
					btn[i].onclick = (function (num){
						return function() {
							alert(num);
						}
					})(i);
				}
			
	}

如此的话，num就能够驻留在指定的值了

什么你要理解闭包？你可能需要看看什么是闭包，我的理解