如何在Javascript中退出for回圈？-有解無憂

我想讓它當用戶點擊問卷上的一個選項時，他們不能再次點擊它。為此，我需要從“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>

uj5u.com熱心網友回復：

你的邏輯不對...

您的 for 回圈正在為您的所有答案設定 click 事件，打破它只會意味著您不會在所有答案上添加該事件。

您需要做的是：

在第一次點擊后洗掉所有答案的點擊事件（在你的 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/375214.html

標籤：javascript html css dom

上一篇：無法加載計算器按鈕

下一篇：使用setTimeout和DOMApi了解WebAPI的執行