首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何让我的For循环将按钮的索引保存在另一个变量中?

要让For循环将按钮的索引保存在另一个变量中,可以使用闭包或者使用let关键字来解决。

闭包解决方案:

代码语言:txt
复制
var buttons = document.getElementsByTagName("button");
var indexArray = [];

for (var i = 0; i < buttons.length; i++) {
  (function(index) {
    buttons[index].addEventListener("click", function() {
      indexArray.push(index);
      console.log(indexArray);
    });
  })(i);
}

在每次循环迭代时,通过立即执行函数创建一个新的作用域,将当前的索引值传递给该函数,并在该函数内部创建一个闭包,使得每个按钮的点击事件都能够访问到对应的索引值。

使用let关键字解决方案:

代码语言:txt
复制
var buttons = document.getElementsByTagName("button");
var indexArray = [];

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    indexArray.push(i);
    console.log(indexArray);
  });
}

使用let关键字声明循环变量i,它会在每次迭代时创建一个新的块级作用域,使得每个按钮的点击事件都能够访问到对应的索引值。

这两种解决方案都能够实现将按钮的索引保存在另一个变量中,并且避免了循环中的变量共享问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

第四章1:列表

正在以推文形式连载出来,欢迎学习。 第四章 列表和循环 这一周,介绍一种称为“列表”新数据类型和一种称为“循环新概念。...列表让我们有能力存储大规模数据,而循环将可以让我们有能力反复执行特定部分代码。 由于列表天然适合循环,因此,我们这周这两个主题一起讲解。...获取列表子列表 在最后这一代码块,我们看到如何输出存储在变量data列表。现在,我们来学习如何获取子列表对象。通常来说,为了获取列表对象,我们仅用方括号和索引位置即可。...接下来,我们[34, ‘hello’]赋与所创建变量inner_list。我们获取这个列表索引位置为1(即列表第2个对象)对象。为了更好理解多个索引如何发挥作用,让我们来看表4-1。...---- 今天是我们第一个数据集合——列表所有要点。它含了很多知识点,但是最重要是理解如何定义,修改值和复制列表。

67210

最近面试都在问些什么?

又是一年毕业季,给大家分享下最近三个月中小厂社招面试面经,这里已经整理出了答案或思路供大家参考。...其中编译器无法确定参数类型放到堆; 如果变量在函数外部存在引用,则放到堆; 如果变量占用内存较大时,优先放入堆; 如果变量在函数外部没有引用,优先放入栈; 我们通常说内存管理也是主要指堆内存管理...GC根节点是什么? 指被直接或间接引用对象集合。通常包括:全局变量和静态变量、调用栈变量、当前执行goroutine。...唯一索引冲突:如果数据库表中有唯一索引,如主键或唯一约束,那么两个线程插入操作只有一个会成功,另一个会因为违反唯一性约束而失败;使用事务和select for update检查数据是否存在,在事务锁定数据行...系统设计相关: 如果你设计一个消息队列,你会如何设计?需要考虑哪些问题?

11610
  • 第68篇:javafx编写扫描器UI界面的线程死锁问题及坑点总结

    Part2 技术研究过程 扫描器设计思路 想实现如下功能:burpsuite抓到一个数据包之后,点击右键弹出菜单,指定扫描任务发送到服务端“扫描任务队列”去进行扫描,与服务端通信是通过socket...但是实测结果,经常在如下代码,出现报错问题,导致程序崩溃,所有扫描任务停止。 这是一个隐藏非常深线程安全bug,在一天中会不定时出现几次,而且没办法复现,大伤脑筋。...后来终于想明白了,一个TabPane是由多个标签组成,当你双击关闭其中一两个标签时,tabPane所有索引id都变了,而另一个线程对于Tab标签for循环操作还在进行当中,而且还是按照原始索引去遍历...,而原始索引都变了,造成了程序崩溃。...以下这个界面,按钮控件特别多,每个按钮功能类似,于是用一个Map集合放置每一个按钮标题和按钮事件中用到关键值,然后用一个for循环,遍历Map集合添加Button按钮组件,很快搞定这个界面,比Scenebuilder

    35431

    C#通过邮箱验证来找回密码

    大家都知道忘记密码一直是一个人头大问题,比如我这鱼记忆就忘记了Ubuntu里面的MySql密码 然后直接GG...只能删库跑路啦 没了 人直接没啦。...考虑到运营商需要收取一毛钱一条短信费,于是手机号验证直接被我pass掉了(此处手动滑稽并流下穷人泪水)。然后通过密问题来进行很简单实现记得早期QQ就有这个密验证找回密码功能。...获取QQ邮箱授权码: 在QQ邮箱邮箱设置,进入账户页面,开启QQ邮箱一系列服务?然后验证密即可获取当前账号QQ邮箱授权码。什么是授权码,它又是如何设置?...这种情况很好解决,只需要在QQ邮箱重新获取一个新授权码即可,为了方便更新授权码,把授权码写成了全局变量。...是通过无脑for循环+Random随机选择字符来实现.......?

    1.5K41

    Excel VBA编程

    文章目录 如何创建VBA VBA语法规则 声明变量变量赋值 变量存储数据参与运算 关于声明变量其他知识 变量作用域 特殊变量——数组 声明多维数组 声明动态数组 其他创建数组方法 数组函数...利用UBound求数组最大索引号 利用LBound函数求最小索引号 求多维数组最大和最小索引号 用join函数一维数组合并成字符串 数组内容写入工作表 数组存取 特殊数据专用容器——常量...…next语句循环处理集合或数组成员 do while循环 使用Goto语句,程序转到另一条语句去执行 with语句,简写代码 sub过程,基本程序单元 sub过程基本结构 在过程调用过程...在VBA定义for循环语法规则如下: for 循环变量=初值 to 终值 step 步长值 循环体 next 循环变量名 for循环都要以next结尾 Sub test() Dim...标签告诉VBA,当程序运行过程晕倒运行时错误时,跳转到标签所在行代码继续执行程序,实际上就是程序跳过出错代码,从另一个地方重新开始执行程序。

    45.5K33

    从 Zero 到 Hero ,一文掌握 Python

    For 循环:你可以在代码块上应用变量 “num” ,而 “for” 语句将为你迭代它。此代码打印与 while 相同代码:从 1 到 10 。...我们只学习了列表索引如何工作还需要告诉你如何向列表数据结构添加一个元素(向列表添加一个项目)。 最常用向列表添加新数据方法是拼接。...就像我们学过使用索引访问 list 一样,我们同样使用索引(在字典 key 就是索引)来访问存储在字典 value 。 正如我们使用 list 那样,让我们学习下如何向字典添加元素。...继承了他眼睛和头发特征,以及他急躁和内向行为。 在面向对象编程,类可以继承另一个共同特征(数据)和行为(方法)。 我们来看另一个例子,并用 Python 实现它。 想象一下汽车。...我们已经学到了很多关于 Python 基础知识: ● Python 变量如何工作 ● Python 条件语句是如何工作 ● Python 循环( while 和 for )是如何工作

    95190

    ArrayList分析1-循环、扩容、版本

    发现了一些有意思东东,真的是大受裨益哈,尤其是版本问题 所以,本篇博客开始大概分三篇讲讲ArrayList里面一些有意思点哈,由于源码大概一千八百逾行,里面大多代码都很通俗,也有些部分存在重复...=0; 这样一个语句,其实这个地方是对循环变量做一次定义,这个地方定义是一次性,而且是第一次循环时候会执行。...(jdk=java8), 可以看到指令内有两处println,自然第一个println即是for循环(标号12处),下面一行就很重要了,官方描述是:局部栈帧索引+1,说明白些也就是i加一,然后就到了标号...// 當且僅當指定長度大於原始數組長度時,此類索引才會存在。結果數組與原始數組類完全相同。...三.ArrayList版本管理 一开始大家会觉得这是个奇怪问题,ArrayList为啥会有版本,版本做什么用? 首先,详细解答第一个问题:ArrayList为什么有版本?

    21720

    JNI告诉你 你应用为什么被卸载

    上述即为C语言调用了java方法 2.3 检测APP卸载 相信很多伙伴在面试时候,总会被问到APP问题,如果你回答不上来,面试官还会一脸鄙视看着你,APP如何活?...其实觉得都是扯淡,系统版本越高Goole限制越严格,我们自己做APP除非是大厂,有白名单,否则不可能做到活,而这个问题其实问也没有多大意义。曾经试过fork活,杀死也是秒死。...检测APP卸载就是,当APP被用户卸载之后,自动打开浏览器网页跳转到一个调查问卷用户去填写为什么会卸载,这个功能PC端软件经常可以看到,APP用不多,但是也是挺有意思,但是和活一样这个功能很鸡肋...>=0时候 说明fork子进程和父进程成功,可以去做判断,当然一般都是子进程成功才去判断 app安装之后默认目录都是 /data/data/包名 所以我们做一个1秒定时循环去fopen这个文件夹,当文件夹不存在时候说明..."); } 这里我们看到LOGD就是我们定义log 这样可以c代码日志输出到控制台,定义如下 #define LOGD(...)

    51440

    Python学习笔记之Pythonenumerate函数

    这个循环遍历了names列表所有元素,并通过增加从零开始计数器变量来为每个元素生成索引。...用enumerate()循环更加Python化 那么为什么用enumerate()函数去保存运行索引很有用呢?...(译者注:写代码越多,出错几率越高,尽量将自己代码看起来简洁,易读,Pythonic,才是我们追求) 修改起始索引 另一个有用特性是,enumerate()函数允许我们为循环自定义起始索引值...(names,1): print(f'{index}: {value}') 在上面的例子函数调用改为enumerate(names, 1),后面的参数1就是本次循环起始索引,替换默认...总结:Pythonenumerate函数 - 关键点 enumerate是Python一个内置函数。你应该充分利用它通过循环迭代自动生成索引变量

    1.6K30

    零基础到精通Python,从这篇文章开始

    For 循环:你可以在代码块上应用变量 “ num ” ,而 “for” 语句将为你迭代它。此代码打印与 while 相同代码:从 1 到 10 。...我们只学习了列表索引如何工作还需要告诉你如何向列表数据结构添加一个元素(向列表添加一个项目)。 最常用向列表添加新数据方法是拼接。...就像我们学过使用索引访问 list 一样,我们同样使用索引(在字典 key 就是索引)来访问存储在字典 value 。 正如我们使用 list 那样,让我们学习下如何向字典添加元素。...“除了从对象内部外无法被访问‘Private’实例变量在Python并不存在。...继承了他眼睛和头发特征,以及他急躁和内向行为。 在面向对象编程,类可以继承另一个共同特征(数据)和行为(方法)。 我们来看另一个例子,并用 Python 实现它。 想象一下汽车。

    1.6K60

    微信手机端本地数据全文检索优化之路

    在方案设计之初,为了这个功能有很好体验,同时考虑到未来接入业务会不断增多,我们设计目标是: 3.1 搜索速度快 微信全文搜索使用SQLite FTS4 Extension,通过倒排索引提高搜索速度...函数输出: 目标字节偏移:表示关键词在命中Doc字节偏移。 例如: Query=、命中Doc=和我弟弟去逛街、目标词语偏移=0、2。 把命中Doc经过分词器分词,可以得到下表: ?...这个分词规则原因主要是在微信对全文搜索结果排序需求主要是其他属性排序,并非依据文档相关性排序。即,全文搜索部分只需要找到存在关键词文档,并不关心文档存在几个关键词。...而且用户输入Query大部分情况都不能组成词语,存在方言,所以把整个词语全部拆开建立索引是符合需求。...图中红色圈内数字表示,此会话,包含关键字“聊天记录个数,而会话排序规则就是会话活跃时间。

    2.6K20

    【Vue】1524- 分享 22 道常被问及 JavaScript 面试题

    var 变量可以在其范围内更新和重新声明;变量可以更新但不能重新声明;const 变量既不能更新也不能重新声明。 var 可以提升到其作用域顶部。... 7、JavaScript如何保持并发? 事件循环。 微和宏队列。 回调。...后面是一个粗箭头 => 和一对分隔正文语句花括号。 在函数表达式,您将函数分配给变量。 可以使用 Function 构造函数动态创建函数,但存在安全和性能问题,不建议使用。...Document Object Model,俗称DOM,代表HTML文档,它用于更改 HTML 文档内容。 15、如何从特定索引返回字符?...类型转换相等 (==) 检查 2 个变量是否相似,无论它们数据类型如何。例如 (“3” ==3) 返回 true。 严格相等 (===) 检查 2 个变量是否具有相似的数据类型和值。

    52630

    应用活终极总结(二):Android6.0及以上活实践(进程防杀篇)

    活防杀和被杀复活涉及内容较多,将它分成了两篇:即进程防杀篇(本文)和进程被杀复活篇(下篇),本篇讨论如何实现进程防杀。...说起来比较绕口,总之本文要讨论内容是如何防止Android应用被系统“杀掉”,下篇讨论是“被杀掉”后如何它复活。...接下来首先分析市面上主流APP防杀方式,为接下来方案提供参考依据,请继续往下阅读。 5、市场主流运动类APP活分析:咕咚(v 7.17.0) 5.1 一键清理/滑动清理 a....需要注意是,对API大于18而言 startForeground()方法需要弹出一个可见通知,如果你觉得不爽,可以开启另一个Service通知栏移除,其oom_adj值还是没变。实现代码如下。...实例全部pop; - singleInstance模式:创建activity实例放入单独,该栈只能存储这个实例,且是作为共享实例存在

    4.1K21

    Pythonenumerate函数

    这个循环遍历了names列表所有元素,并通过增加从零开始计数器变量来为每个元素生成索引。 ...用enumerate()循环更加Python化  那么为什么用enumerate()函数去保存运行索引很有用呢? ...(译者注:写代码越多,出错几率越高,尽量将自己代码看起来简洁,易读,Pythonic,才是我们追求)  修改起始索引  另一个有用特性是,enumerate()函数允许我们为循环自定义起始索引值...函数调用改为enumerate(names, 1),后面的参数1就是本次循环起始索引,替换默认0:  1: Alice 2: Bob 3: Carl OK,这段代码演示就是如何Python...总结:Pythonenumerate函数 - 关键点  enumerate是Python一个内置函数。你应该充分利用它通过循环迭代自动生成索引变量

    1.3K20

    Python 密集知识点汇总

    For 循环:你可以在代码块上应用变量 “num” ,而 “for” 语句将为你迭代它。此代码打印与 while 相同代码:从 1 到 10 。...我们只学习了列表索引如何工作还需要告诉你如何向列表数据结构添加一个元素(向列表添加一个项目)。 最常用向列表添加新数据方法是拼接。...就像我们学过使用索引访问 list 一样,我们同样使用索引(在字典 key 就是索引)来访问存储在字典 value 。 正如我们使用 list 那样,让我们学习下如何向字典添加元素。...“除了从对象内部外无法被访问‘Private’实例变量在Python并不存在。...继承了他眼睛和头发特征,以及他急躁和内向行为。 在面向对象编程,类可以继承另一个共同特征(数据)和行为(方法)。 我们来看另一个例子,并用 Python 实现它。 想象一下汽车。

    73830

    pythonenumerate函数怎么加判断条件_java中比int大整数类型

    这个循环遍历了names列表所有元素,并通过增加从零开始计数器变量来为每个元素生成索引。...用enumerate()循环更加Python化 那么为什么用enumerate()函数去保存运行索引很有用呢?...(译者注:写代码越多,出错几率越高,尽量将自己代码看起来简洁,易读,Pythonic,才是我们追求) 修改起始索引 另一个有用特性是,enumerate()函数允许我们为循环自定义起始索引值。...函数调用改为enumerate(names, 1),后面的参数1就是本次循环起始索引,替换默认0: 1: Alice 2: Bob 3: Carl OK,这段代码演示就是如何Pythonenumerate...总结:Pythonenumerate函数 – 关键点 enumerate是Python一个内置函数。你应该充分利用它通过循环迭代自动生成索引变量

    1.1K10

    VisualStudio 断点调试详解

    点击右边白色按钮就可以禁用断点 在断点被禁用时候,还是鼠标移动到断点上,但是显示出来右边白色按钮就可以开启断点,这个按钮功能是开启或禁用断点 另一个禁用断点方法是通过断点窗口选择对应断点...为了小伙伴可以快速进行调试,忽略自己不关注断点,在 VisualStudio 提供了条件断点功能,给断点进入添加条件 给断点添加条件有两个方法,第一个方法和使用代码行添加断点方法相同,鼠标移动到断点上...在断点中途可以选择重置次数 又如我在进入一个循环想在每 100 次时候进入暂停看一下,可以添加命中数选数倍于 100 就可以 条件表达式 在条件表达式是比较复杂功能,可以当前局部变量和实例变量...,或直接使用变量进行判断 例如我当前方法有一个局部变量 foo 和一个字段 _f1 需要在这两个都不为空时候进入断点,此时可以添加一下表达式 ?...标签作为范围,可以直接显示某个标签断点 此时点击开启或禁用断点按钮或删除断点按钮就可以对当前显示断点进行全部开启或禁用等 保存断点 默认断点数据保存在哪 默认会保存在 .vs\**\.suo 文件里面

    2.3K20

    交互式脚本_交互式和脚本式区别

    大家好,又见面了,是你们朋友全栈君。...文本文档格式后缀 .txt 改为 .vbs 然后双击运行文件即可 msgbox 语法 语法:msgbox "对话框内容","对话框类型(参数:0,1,2,3,4,5)","对话框标题" 对话框内容...上面我们只是实现了很简单展示功能,那么我们需要实现交互功能,就要用到变量了 在 vbs 可以通过 dim 定义变量,语法为:dim 变量名1,变量名2,变量名3...变量名n 其中 inputbox...,那就循环从数组取值展示 如果用户点击了同意,那就阴谋得逞,退出选项 MsgBox "佛前哭求" MsgBox "奈何桥等待" MsgBox "五百次回眸" MsgBox "千年回首" MsgBox..." a(4)="大" a(5)="你就答应把^o^" Dim j Do Select Case msgbox ("姑娘,做女朋友吧", 4) Case 6 MsgBox "you are my

    81610

    40+个对初学者非常有用PHP技巧(二)

    否则,例如,文件是由“php”用户创建,而你作为一个不同用户,系统就不会你访问或打开文件,然后你必须努力获得root权限,更改文件权限等等。 ? 15.不要检查提交按钮值来检查表单提交 ?...以上代码在大多数时候是正确,除了应用程序使用多语言情况。然后“Save”可以是很多不同东西。那么你该如何再做比较?所以不能依靠提交按钮值。相反,使用这个: ?...现在你就可以摆脱提交按钮值了。 16.在函数总是有相同值地方使用静态变量 ? 相反,使用静态变量: ? 17.不要直接使用$ _SESSION变量 一些简单例子是: ? 但是这有一个问题。...重定向之后要记得做一个exit 千万不要把函数调用放到for循环控制行。...下面是关于如何通过引用来赋值从而节省内存一个简单示例。 ? 一个典型php 5.4机器上输出是: ? 因此可以看出,内存被保存在第3份通过引用副本

    1.1K10
    领券