首页 > 解决方案 > 我需要通过 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循环!我应该怎么办?请帮忙!提前致谢。

标签: javascript

解决方案


对于这种情况,您宁愿进行递归

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。然后,它只是删除事件侦听器 - 类似于结束循环。


推荐阅读