javascript - 点击数不增加

Question

I have a simple, multiple question quiz that displays certain text when the correct or incorrect answer is selected. 现在我正在尝试添加一个增量分数，但没有成功。我添加了一个警报，它会触发答案是否正确，但分数不会增加。

我的代码中缺少什么？

完整的代码包含在下面。为了简单起见，只包括了一个问题。

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>

标签： javascript

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>