如何在 Javascript 中退出 for 循环？

Question

我想这样当用户点击问卷上的一个选项时，他们不能再次点击它。为此，我需要退出“for循环”（在这段代码的末尾），但是当我输入break语句时，它在某种程度上是不正确的。你能告诉我正确的做法吗？非常感谢您的回答！ :)

<script>
   document.addEventListener("DOMContentLoaded", function() {
       function clicked(answer, i) {
           if (answer[i].value == "correct")
           {
               answer[i].style.backgroundColor = "green";
               let result = "<p>Correct!</p>";
               document.getElementsByClassName("section")[0].insertAdjacentHTML('beforeend', result);
               return;
           }
           else
           {
               answer[i].style.backgroundColor = "red";
               let result = "<p>Wrong!</p>";
               document.getElementsByClassName("section")[0].insertAdjacentHTML('beforeend', result);
               return;
           }
           }
       let answer = document.getElementsByTagName('button');
       for (let i = 0; i < answer.length; i++) {
           answer[i].addEventListener("click", () => {
           {
               clicked(answer, i);
           }
       });
       }
       });
</script>

Answer 1

你的逻辑错了……

您的 for 循环正在为您的所有答案设置点击事件，打破它只是意味着您不会在所有答案上添加事件。

你需要做的是：

• 在第一次点击后（在您的 clicked() 函数中）删除所有答案上的点击事件
• 设置一个真/假“hasBeenClickedOn”标志，您将在 clicked() 函数开始时检查它

例如：

<script>

    var hasBeenClickedOn = false; // global flag

   document.addEventListener("DOMContentLoaded", function() {
       function clicked(answer, i) {
       
            if (hasBeenClickedOn===true) { return false; } // check the flag       
            hasBeenClickedOn = true; // set the flag       
       
           if (answer[i].value == "correct")
           {
               answer[i].style.backgroundColor = "green";
               let result = "<p>Correct!</p>";
               document.getElementsByClassName("section")[0].insertAdjacentHTML('beforeend', result);
               return;
           }
           else
           {
               answer[i].style.backgroundColor = "red";
               let result = "<p>Wrong!</p>";
               document.getElementsByClassName("section")[0].insertAdjacentHTML('beforeend', result);
               return;
           }
           }
       let answer = document.getElementsByTagName('button');
       for (let i = 0; i < answer.length; i++) {
           answer[i].addEventListener("click", () => {
           {
               clicked(answer, i);
           }
       });
       }
       });
</script>