单击时数字不增加

Question

我有一个简单的多问题测验，当选择正确或不正确的答案时，它会显示某些文本。现在我正在尝试添加增量分数，但没有成功。我添加了一个警报，无论答案正确还是错误都会触发警报，但分数不会增加。我的代码中缺少什么？完整的代码如下。为了简单起见，只包含一个问题。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;  });})();

Answer 1

没有什么问题score。调整时必须更新它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

您的document.getElementById("score").innerText = score;陈述位于EventListener您提高分数的 之外。所以你需要把它放在你的括号内EventListener。