如何修复此非法中断声明？

Question

I have a loop running through every radio. Based on the radio selected, the user earns a certain amount of points to their score. Once that score is 8 or higher, i have a display box that I want to show. Problem is I only want it to display once, not for ever single instance of a score >= 8.

for (var i = 0; i < allRadiosArr.length; i++) {
  allRadiosArr[i].addEventListener('change', (e)=>{
    totalScoreMain = 0;
    let checkedRadios = document.querySelectorAll('input[type="radio"]:checked');
    checkedRadios.forEach(function(checkedRadio){
      totalScoreMain += parseInt(checkedRadio.getAttribute('value'));
    });
    if (totalScoreMain >= 8) {
      referralModalMain.style.display = 'block';
      break;
    }
  });

  closeButtonMain.addEventListener('click', (e)=>{
  referralModalMain.style.display = 'none';
  });
}

Answer 1

You don't have to break; . Use a flag, eg let modalShown = false , then set that to true when you show the modal the first time, and don't show it again.

let modalShown = false;
for (var i = 0; i < allRadiosArr.length; i++) {
  allRadiosArr[i].addEventListener('change', (e)=>{
    totalScoreMain = 0;
    let checkedRadios = document.querySelectorAll('input[type="radio"]:checked');
    checkedRadios.forEach(function(checkedRadio){
      totalScoreMain += parseInt(checkedRadio.getAttribute('value'));
    });
    if (!modalShown && totalScoreMain >= 8) {
      referralModalMain.style.display = 'block';
      modalShown = true;
    }
  });

  closeButtonMain.addEventListener('click', (e)=>{
    referralModalMain.style.display = 'none';
  });
}

Edit: Please make sure you read and understood all the helpful comments you received under your question, because they are more valuable than my simple answer and contain important advices.