javascript - 我需要通过 JS 中的循环单击事件
问题描述
我是 JavaScript 新手。在我的小项目中,我需要用户在每次循环迭代时单击一个按钮。但实际上它并没有发生。
INPUT: <input id="input" >
<button id="btn">Play</button>
<script>
const btn = document.querySelector('#btn');
const inp = document.querySelector('#input');
for(let i = 0; i < 10; i++){
btn.addEventListener('click', function(){
let x = inp.value;
console.log(x);
console.log(i);
});
}
</script>
我也试过while循环!我应该怎么办?请帮忙!提前致谢。
解决方案
对于这种情况,您宁愿进行递归
INPUT: <input id="input" >
<button id="btn">Play</button>
<script>
const btn = document.querySelector('#btn');
const inp = document.querySelector('#input');
var i=0;
btn.addEventListener('click', function(evt){
let x = inp.value;
console.log(x);
console.log(i);
if(i<10){
i++;
}else{
evt.target.removeEventListener();
}
});
</script>
正如您在此处看到的,我添加了一个事件侦听器,负责将值递增i
直到达到 10。然后,它只是删除事件侦听器 - 类似于结束循环。
推荐阅读
- c - C fopen 在我的用户目录而不是桌面 Mac 中创建文件
- c - 使用二维数组初始化 STM32F 引脚
- python - 避免 Numba 中的竞争条件
- javascript - 如何从 Google Firestore 获取数据到我的 Vue 实例中?
- asp.net - asp.net 上的离线地图(用坐标标记)
- axios - Next.js 动态 api 页面无法响应带有 Content-Type=application/json 标头的 post 请求
- node.js - 谷歌云功能内存不足错误没有意义
- reactjs - 挂钩 useTranslation() 不读取导入的命名空间 - i18next
- python - 在 seaborn.JointGrid 的边缘图中显示 yticks
- bash - 简单 bash 脚本中的错误