【例子】生成10个按钮，每个按钮点击的时候弹出1-10

最新推荐文章于 2023-03-29 18:50:22 发布

未生1886

最新推荐文章于 2023-03-29 18:50:22 发布

阅读量516

点赞数

文章标签： es6 js

本文链接：https://blog.csdn.net/simadeshuwu/article/details/116331786

版权

方法一

-分析：用通用的方法解决这个问题。首先把var i= 0放在外面，for循环里面的小括号写(i=0;i<=10;i++)，然后花括号里面写一个自执行的匿名函数，把 i作为参数传进去，也就是(function(i){

})(i);

· 然后在这个独立的函数作用域内，去生成按钮，并把它展示在页面中。首先，创建一个按钮，就是var btn=document.creatElement(‘button’);【这里的‘button’就是传入的标签的名字】

· 然后往btn的innerText上面插入一些内容，如：btn.innerText=i;

· 然后把btn的onclick事件赋值一下，赋值成事件处理程序，函数里面写alert（i）。也就是

btn.οnclick=function(){

alert(i);
};

· 然后，把按钮相关内容写完之后，就把它插入body当中，即document.body.appendChild(btn);
· 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>let</title>
</head>
<body>
	<script>
		//生成10个按钮，每个按钮点击的时候弹出1-10
	var i=0;
	for(i=1;i<=10;i++){
		(function(i){
			var btn=document.createElement("button");
			btn.innerHTML=i;
			btn.onclick=function(){
				alert(i);
			};
			document.body.appendChild(btn);
		})(i)
	}


	</script>
</body>
</html>

在这里插入图片描述

-代码解释：

· 首先，在btn的地方有个onclick，让它成为一个函数，然后alert(i)；这就是触发事件的时候执行的一个回调函数，里面做的就是弹出一个弹框，内容是i。这个i因为在当前的函数作用域中是没有的，它就会往上一级去找，上一级就是(function(i){

…

})(i)，这一级通过一个参数，也就是形参把i传进来了，那么i在这个函数作用域内就是有的，这一级中有i，那alert中拿到的就是这个i。每个按钮对应的i是不一样的，因为循环10次，相当于如下书写：

（把1传进去了，然后第二次循环，又是一个独立的函数作用域，就把2传进去了，这样子每个按钮对应拿到的i就是不一样的）
在这里插入图片描述

方法二

-使用let实现：

//使用let实现面试常见小例子：
	for(let i=1;i<=10;i++){
			var btn=document.createElement("button");
				btn.innerHTML=i;
			btn.onclick=function(){
				alert(i);
			}
			document.body.appendChild(btn);
	}