使用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>

如下图所示：

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

4条回答默认最新

你好！机器人 2022-03-11 02:06

关注

<!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>

展开全部

本回答被题主选为最佳回答 , 对您是否有帮助呢?

查看更多回答(3条)

编辑

预览

报告相同问题？

关注问题

我们使用 let 或 const 代替 var，输出报错是为什么？ javascript 前端
2022-01-20 13:40

回答 2 已采纳 ReferenceError：a undefined。let和const声明可以让变量在其作用域上受限于它所使用的块、语句或表达式。与var不同的是，这些变量没有被提升，并且有一个所谓的暂时死区(TD
请问一下 axios的发送请求 let和const 报错是为什么 ajax vue.js
2021-12-26 07:19

回答 1 已采纳把conse改成letconst 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改let 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用
const和let这个东西这么鸡肋，到底有什么用 javascript
2021-03-18 07:11

回答 2 已采纳 const类似于常量，是不支持值改变的, let声明的变量在当前方法运行结束后就被回收了.
前端 ——youtube、tiktok视频封面获取并使用canvas合并封面和自定义播放按钮生成图片
2025-03-20 18:16

yma16的博客大家好，我是yma16，本文分享前端 ——youtube、tiktok视频封面获取并使用canvas合并封面和自定义播放按钮生成图片。canvas 绘制图片Canvas是HTML5提供的一个可以使用脚本（通常是JavaScript）进行绘图的元素。它...
let和const的区别是什么啊，为什么我把list定义成let，保存就自己变成了const? javascript vue.js
2021-11-25 01:34

回答 2 已采纳 let声明的变量可以改变，值和类型都可以改变，没有限制。const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
宏常量和const使用结果不同 c语言
2022-10-15 15:41

回答 2 已采纳 #define PI 3.14 是在预处理的时候用3.14替换PI，3.14默认double类型。
react使用Hook实现分页功能 javascript react.js
2022-11-10 03:07

回答 2 已采纳 useEffect(() => { // 这个接口需要在页面刚进来的时候就要调用一次拿到数据展示 getBannerListData() }, [pa
前端 ——xml转json json转xml 实现 mjml 邮件内容转json，json转mjml
2025-01-02 08:41

yma16的博客大家好，我是yma16，本文分享前端 ——xml转json json转xml 实现 mjml 邮件内容转json，json转mjmlxmlXML（Extensible Markup Language）是一种类似于 HTML，但是没有使用预定义标记的语言。因此，可以根据自己的...
C中关于define和const的使用 c语言
2021-07-18 11:16

回答 2 已采纳我不知道你的代码为什么不会有警告，const不加类型会默认为int类型，而#define是宏替换所以#define之后为 inches = height /2.54const之后为inches = h
什么是“使用const限定强制实现对象最低访问权限” c++
2022-11-02 12:34

回答 1 已采纳加了const就是最低访问权限了啊，你都不可以修改它了啊，只能读
vite+vue3+ts中如何导入和使用jsonwebtoken javascript vue.js 前端
2022-10-06 12:52

回答 1 已采纳 import * as jwt from ‘jsonwebtoken’试一下呢
前端 vite+vue3——写一个随机抽奖组件
2023-10-10 17:10

yma16的博客前端vue2、vue3去掉url路由“ # ”号——nginx配置csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板认识vite_vue3 初始化项目到打包python_selenuim获取csdn新星赛道选手所在城市用echarts...
ES学习之var，let，const的比较
2018-03-20 07:22

Liebe沐慕木的博客作为前端，不管是菜鸟还是大牛，都时时刻刻在使用var，let，const。作为前端入门级菜鸟选手，决定整理一下自己的知识。以下内容是小沐在查看很多文章资料后总结出来的，可能有地方和一些文章有相似之处，也有不准确...
前端vite+vue3——可视化页面性能耗时指标（fmp、fp）
2024-03-09 16:59

yma16的博客大家好，我是yma16，本文分享关于前端vite+vue3——可视化页面性能耗时（fmp、fp）。fmp的定义FMP（First Meaningful Paint）是一种衡量网页加载性能的指标。它表示在加载过程中，浏览器首次渲染出有意义的内容所...
轻松带你使用H5实现五子棋
2024-12-23 22:27

万少-的博客可以看到 canvas是一个默认宽高为、内联的一个元素。以下代码画出一个对角线 ...如果想要修改填充的颜色的话就要使用 fillStyle 主要有四个功能初始化画布这里面需要初始化的属性有需求是想要的棋
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 3月31日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 3月24日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
修改了问题 3月10日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 3月10日

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

4条回答 默认 最新

问题事件

4条回答默认最新