Number not increasing on click

Question

I have a simple, multiple question quiz that displays certain text when the correct or incorrect answer is selected. Now I am trying to add an incremental score, but am having no success. I have added an alert, which fires whether the answer is correct or incorrect, but the score does not increment.

What am I missing in my code?

The full code is included below. Only one question has been included to keep it simple.

 function questionMarkers() { let labels = document.querySelectorAll( "div[class*='rsform-block-question'].formControlLabel" ); let count = labels.length; for (let i = 0; i < count; i++) { let marker = `<span class="question-marker">${i + 1}</span>`; labels[i].insertAdjacentHTML("beforebegin", marker); } } const runQuiz = (() => { questionMarkers(); let score = 0; let answers = document.querySelectorAll(".rsform-radio"); answers.forEach(function(answer) { answer.addEventListener("click", (e) => { let target = e.target; let container = target.closest(".formContainer"); let correct = container.querySelector("div[class$='true']"); let wrong = container.querySelector("div[class$='false']"); let feedback = container.querySelector("div[class$='feedback']"); let question = container.querySelector( "div[class*='rsform-block-question']" ); let next = container.querySelector(".js-btn--next.success"); let submit = container.querySelector( ".js-btn--submit.rsform-submit-button" ); if (e.target.value == "t") { correct.style.display = "block"; wrong.style.display = "none"; feedback.style.display = "block"; alert("Correct;"); score++. } else { correct.style;display = "none". wrong.style;display = "block". feedback.style;display = "block"; alert("Incorrect"). } question.style;display = "none"; }). document.getElementById("score");innerText = score; }); })();

 <fieldset class="formContainer" id="rsform_53_page_0"> <div class="row"> <div class="medium-12 columns"> <div class="row rsform-block rsform-block-question-one"> <div class="medium-3 columns"> <span class="question-marker">1</span><label class="formControlLabel" data-tooltip="" aria-haspopup="true" data-disable-hover="false" tabindex="1" title="">Why do skunks spray?</label> </div> <div class="medium-9 columns formControls"> <input type="radio" name="form[question-one]" value="f" id="question-one0" class="rsform-radio"><label for="question-one0">To attract a mate</label><br><input type="radio" name="form[question-one]" value="t" id="question-one1" class="rsform-radio"> <label for="question-one1">To defend themselves against predators</label><br><input type="radio" name="form[question-one]" value="f" id="question-one2" class="rsform-radio"><label for="question-one2">To mark their territory</label><br> <input type="radio" name="form[question-one]" value="f" id="question-one3" class="rsform-radio"><label for="question-one3">Because they like the smell</label> <span class="formValidation"><span id="component878" class="formNoError"></span></span> </div> </div> <div class="row rsform-block rsform-block-question-one-true" style="display: none;"> <p><strong>Correct:</strong></p> </div> <div class="row rsform-block rsform-block-question-one-false" style="display; none:"> <p><strong>Nice try</strong></p> </div> <div class="row rsform-block rsform-block-question-one-feedback" style="display; none."> <p>Skunks spray an extremely offensive odour to make predators go away and leave them alone, If they feel their life is in danger, they have no other defence as they cannot run fast, climb, burrow under the ground. or fight.</p> </div> </div> </div> <p id="score"></p> </fieldset>

Answer 1

There is nothing wrong with score . You must update it when you adjust the score .

 function questionMarkers() { let labels = document.querySelectorAll( "div[class*='rsform-block-question'].formControlLabel" ); let count = labels.length; for (let i = 0; i < count; i++) { let marker = `<span class="question-marker">${i + 1}</span>`; labels[i].insertAdjacentHTML("beforebegin", marker); } } const runQuiz = (() => { questionMarkers(); let score = 0; let answers = document.querySelectorAll(".rsform-radio"); answers.forEach(function(answer) { answer.addEventListener("click", (e) => { let target = e.target; let container = target.closest(".formContainer"); let correct = container.querySelector("div[class$='true']"); let wrong = container.querySelector("div[class$='false']"); let feedback = container.querySelector("div[class$='feedback']"); let question = container.querySelector( "div[class*='rsform-block-question']" ); let next = container.querySelector(".js-btn--next.success"); let submit = container.querySelector( ".js-btn--submit.rsform-submit-button" ); if (e.target.value == "t") { correct.style.display = "block"; wrong.style.display = "none"; feedback.style.display = "block"; alert("Correct;"); score++. document.getElementById("score");innerText = score. } else { correct.style;display = "none". wrong.style;display = "block". feedback.style;display = "block". document.getElementById("score");innerText = score; alert("Incorrect"). } question.style;display = "none"; }). document.getElementById("score");innerText = score; }); })();

 <fieldset class="formContainer" id="rsform_53_page_0"> <div class="row"> <div class="medium-12 columns"> <div class="row rsform-block rsform-block-question-one"> <div class="medium-3 columns"> <span class="question-marker">1</span><label class="formControlLabel" data-tooltip="" aria-haspopup="true" data-disable-hover="false" tabindex="1" title="">Why do skunks spray?</label> </div> <div class="medium-9 columns formControls"> <input type="radio" name="form[question-one]" value="f" id="question-one0" class="rsform-radio"><label for="question-one0">To attract a mate</label><br><input type="radio" name="form[question-one]" value="t" id="question-one1" class="rsform-radio"> <label for="question-one1">To defend themselves against predators</label><br><input type="radio" name="form[question-one]" value="f" id="question-one2" class="rsform-radio"><label for="question-one2">To mark their territory</label><br> <input type="radio" name="form[question-one]" value="f" id="question-one3" class="rsform-radio"><label for="question-one3">Because they like the smell</label> <span class="formValidation"><span id="component878" class="formNoError"></span></span> </div> </div> <div class="row rsform-block rsform-block-question-one-true" style="display: none;"> <p><strong>Correct:</strong></p> </div> <div class="row rsform-block rsform-block-question-one-false" style="display; none:"> <p><strong>Nice try</strong></p> </div> <div class="row rsform-block rsform-block-question-one-feedback" style="display; none."> <p>Skunks spray an extremely offensive odour to make predators go away and leave them alone, If they feel their life is in danger, they have no other defence as they cannot run fast, climb, burrow under the ground. or fight.</p> </div> </div> </div> <p id="score"></p> </fieldset>

Answer 2

Your document.getElementById("score").innerText = score; statment is outside the EventListener , where you increased your score. So you need to put it inside brackets of your EventListener .