使用let和const实现选手编号提示功能

使用for循环为所有的button绑定点击事件，当点击按钮时，输出自身索引
（script怎么写啊）

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script>
       

    </script>
</head>
<body>
    <div>
        <button id="btn1" >选手1</button>
        <button id="btn2">选手2</button>
        <button id="btn3">选手3</button>
        <button id="btn4">选手4</button>
    </div>
    <p>我的编号是：</p>
</body>
</html>

如下图所示：

img

img

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script>
       
 
    </script>
</head>
<body>
    <div>
        <button id="btn1" >选手1</button>
        <button id="btn2">选手2</button>
        <button id="btn3">选手3</button>
        <button id="btn4">选手4</button>
    </div>
    <p>我的编号是：</p>
</body>
<script>
    var btn = document.getElementsByTagName("button")
    for (let i=0;i<btn.length;i++){
        btn[i].onclick = function (e) {
            document.getElementsByTagName('p')[0].innerText = `我的编号是：${i+1}`
        }
    }
</script>
</html>

过去div元素。循环一下。或者事件委托只给父级元素家事件。

你好，你看看是不是要这个效果


```html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<script>
    var btn = document.getElementsByTagName("input");
    for (var i=0;i<3;i++){
        btn[i].onclick = function () {
            alert(i)
        }
    }
</script>
</body>

```


<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <script></script>
  </head>
  <body>
    <div>
      <button id="btn1">选手1</button>
      <button id="btn2">选手2</button>
      <button id="btn3">选手3</button>
      <button id="btn4">选手4</button>
    </div>
    <p>我的编号是：<span id="num"></span></p>

    <script>
      // 使用const 获取所有的button元素
      const btns = document.querySelectorAll("button");

      // for循环 至于这里为什么用let声明变量  参考一下什么是会计作用域
      for (let index = 0; index < btns.length; index++) {
        // 获取对应循环元素
        const element = btns[index];
        // 绑定点击事件
        element.onclick = function (e) {
          // 替换  id=”num“  文本内容    index是索引
          document.querySelector("#num").innerText = index;
        };
      }
    </script>
  </body>
</html>

img