Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

Hairball

New Coder
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.

JavaScript:
    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!
 
In my index page I have this-
Code:
<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:

JavaScript:
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"
 
Well never mind, I finally found a solution that works for me.

This does what I need it to do -
JavaScript:
function disableChoicess() {
    const options = document.querySelectorAll('.choice');
    options.forEach(option => {
        option.style.pointerEvents = 'none';
    });
}
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom