JavaScript Disable clicking on answers in a quiz after making a choice

[Hairball]

Hi,
Working on a quiz app in Javascript and so everything is working except after I click on an answer I can keep clicking on the other answers.
How do I prevent/disable the all answers once a choice is made ?

In my loadQuestion function I add the question and possible answers, which there are 4, to the page.

    for (let i = 0; i < choices.length; i++)
    {
         const choiceElem = document.createElement('div');
         let choiceText = choices[i];
         choiceElem.classList.add('choice');
         choiceElem.textContent = choiceText;
         clickHandle = ()=> checkAnswer(choiceText);
         choiceElem.addEventListener('click', clickHandle);
         choicesElem.appendChild(choiceElem);
    }

Thanks!

 

[menator01]

What are you using, radio button or checkbox?

 

[Hairball]

In my index page I have this-

<div class="container">
  <h1>Quiz Demo</h1>
  <div id="question"></div>
  <div id="choices"></div>
  <div id="result"></div>
  <button id="nextBtn">Next Question</button>
</div>

Then in the loadQuestion function the "buttons" are add as in my original post.
here is the complete function:

function loadQuestion()
  {
    const question = quizData[currentQuestion];
    questionElem.textContent = question.question;
    choicesElem.innerHTML = '';
    
    let theQuestion = quizData[currentQuestion].question;
    let choices = quizData[currentQuestion].choices;
    
    
        for (let i = 0; i < choices.length; i++)
        {
              const choiceElem = document.createElement('div');
              let choiceText = choices[i];
              choiceElem.classList.add('choice');
              choiceElem.textContent = choiceText;
              clickHandle = ()=> checkAnswer(choiceText);
              choiceElem.addEventListener('click', clickHandle);
            
              choicesElem.appendChild(choiceElem);
        }
  }

choiceElem is the "button"

 

[Hairball]

Well never mind, I finally found a solution that works for me.

This does what I need it to do -

function disableChoicess() {
    const options = document.querySelectorAll('.choice');
    options.forEach(option => {
        option.style.pointerEvents = 'none';
    });
}