Переменная Javascript не добавляет значения должным образом

Question

У меня есть этот код в HTML и JavaScript HTML

function getResult() {
  let answer_one = document.getElementById("question_one").value;
  let correct_ans = 0;
  let result = "You answered " + correct_ans + " correctly.";

  if (answer_one === "abuja") {
    correct_ans++;
  }

  document.getElementById("result").innerHTML = result;
}

<div class="container">
  <div class="question1">
    <p>What is the capital of Nigeria</p><br>
    <input type="text" id="question_one">

  </div>

  <button id="button" onclick="getResult();">Submit</button>

</div>
<!--end of container-->

<div class="button_after">

  <h1 id="result"></h1>

</div>
<!--end of button_after-->

Моя проблема в том, что переменная correct_ans не добавляется, когда я набираю правильный ответ в текстовом поле

Answer 1

Вы объявили переменную abuja до того, как обновили переменную correct_ans.Поместите его после условия if.Если вы добавите другие вопросы, вам нужно убрать первоначальное объявление correct_ans = 0 из функции, или вы всегда получите 0 или 1.

function getResult() {
  let answer_one = document.getElementById("question_one").value;
  
  let correct_ans = 0;
  
  if (answer_one === "abuja") {
    correct_ans++;
  }
  let result = "You answered " + correct_ans + " correctly.";

  document.getElementById("result").innerHTML = result;
}

<div class="container">
  <div class="question1">
    <p>What is the capital of Nigeria</p><br>
    <input type="text" id="question_one">

  </div>

  <button id="button" onclick="getResult();">Submit</button>

</div>
<!--end of container-->

<div class="button_after">

  <h1 id="result"></h1>

</div>
<!--end of button_after-->

Answer 2

В вашем коде результат оценивался до приращения correct_ans.Попробуйте вместо этого.

function getResult() {
  let answer_one = document.getElementById("question_one").value;
  let correct_ans = 0;
  let result = "";

  if (answer_one === "abuja") {
    correct_ans++;
  }
  result = You answered " + correct_ans + " correctly.
  document.getElementById("result").innerHTML = result;
}

Answer 3

Вы должны инициализировать переменную result после проверки правильности ответа.

function getResult() {
  let correct_ans = 0;
  let answer_one = document.getElementById("question_one").value;  
  if (answer_one === "abuja") correct_ans++;

  let result = "You answered " + correct_ans + " correctly.";
  document.getElementById("result").innerHTML = result;
}

<div class="container">
  <div class="question1">
    <p>What is the capital of Nigeria</p><br>
    <input type="text" id="question_one">

  </div>

  <button id="button" onclick="getResult();">Submit</button>

</div>
<!--end of container-->

<div class="button_after">

  <h1 id="result"></h1>

</div>
<!--end of button_after-->