2.1.2 上机训练

上机练习1 一一 let 命令使用

需求说明

使用 for 循环体中 let 的父子作用域，解决示例 4 中单击任意按钮最后均打印“这是第 5 个按钮”的问题，最终实现页面效果如下图所示。

 <!DOCTYPE html>
<html lang="zh">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>for 循环体中 let 命令</title>
</head>
 
<body>
  <button>按钮</button> 
  <button>按钮</button>
  <button>按钮</button> 
  <button>按钮</button>
  <button>按钮</button>
  <script>
    var hzhBtns = document.querySelectorAll('button');
    for(let hzh = 0; hzh < hzhBtns.length; hzh++) {
      hzhBtns[hzh].onclick = function () {
        console.log("这是第" + hzh + "个按钮");
      }
    }
  </script>
</body>
</html>

posted @ 2022-06-08 15:33 黄子涵阅读(61) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 2 1.1 let 命令

· 第2章 let和const命令

· let是es6中声明变量的方式，有自己的作用域块，可以放变量，所以let绑定for循环时，每个i都有自己的值.

· let 块级作用域在循环中执行异步操作的使用

· 【shell编程】let命令

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？

公告

昵称：黄子涵
园龄： 3年6个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

黄子涵

2.1.2 上机训练

上机练习1 一一 let 命令使用

需求说明

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

	<!DOCTYPE html>
	<html lang="zh">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>for 循环体中 let 命令</title>
	</head>

	<body>
	<button>按钮</button>
	<button>按钮</button>
	<button>按钮</button>
	<button>按钮</button>
	<button>按钮</button>
	<script>
	var hzhBtns = document.querySelectorAll('button');
	for(let hzh = 0; hzh < hzhBtns.length; hzh++) {
	hzhBtns[hzh].onclick = function () {
	console.log("这是第" + hzh + "个按钮");
	}
	}
	</script>
	</body>
	</html>