JavaScript中如何退出for循环？点击问卷选项禁止二次点击实现方法

误区说明 #

你想靠break退出for循环的思路是错的，这个for循环仅在页面加载完成时执行一次，作用是给所有按钮绑定点击事件，等用户能点击按钮的时候，这个循环早就已经执行结束了，加break完全起不到限制后续点击的作用。

修正后的代码 #

<script>
   document.addEventListener("DOMContentLoaded", function() {
       let answer = document.getElementsByTagName('button');
       // 标记是否已经答过题
       let hasAnswered = false;
       function clicked(answer, i) {
           // 已经答过题直接返回，不执行后续逻辑
           if(hasAnswered) return;
           // 答题后立刻标记为已答，所有后续点击都失效
           hasAnswered = true;
           if (answer[i].value == "correct")
           {
               answer[i].style.backgroundColor = "green";
               let result = "<p>Correct!</p>";
               document.getElementsByClassName("section")[0].insertAdjacentHTML('beforeend', result);
           }
           else
           {
               answer[i].style.backgroundColor = "red";
               let result = "<p>Wrong!</p>";
               document.getElementsByClassName("section")[0].insertAdjacentHTML('beforeend', result);
           }
           // 可选：给所有按钮加上禁用状态，视觉上更明确不能点击
           for(let j = 0; j < answer.length; j++){
               answer[j].disabled = true;
               answer[j].style.cursor = "not-allowed";
           }
       }
       
       for (let i = 0; i < answer.length; i++) {
           answer[i].addEventListener("click", () => {
               clicked(answer, i);
           });
       }
   });
</script>

实现逻辑说明 #

• 新增hasAnswered全局状态标记用户是否已经提交过答案，只要有一次点击触发后就把标记设为true，所有后续点击都会直接拦截返回
• 可选补充了按钮禁用的样式逻辑，用户点击后所有按钮都变成禁用状态，视觉上更清晰不可点击的交互效果

内容的提问来源于stack exchange，提问作者Leon_idas