在文本框中輸入正確答案時如何在 Vanilla JS 中增加分數

Question

我有一個問題，由用戶在文本框中輸入來回答。 當答案正確時，我如何使分數 go 加一？ 我的 JS 不工作，因為分數保持為 0...

<p id="score">Score:</p>
<h3>Question 1:</h3>

<p>Where does skateboarding originate from?</p>
<input type="text" id="A1">

function keepScore() {
      if (document.getElementById("A1").value == "California") {
              score = score++
      }
}

keepScore()

document.getElementById("score").innerHTML = "Score:" + score

Answer 1

 let score = 0; function keepScore() { if (document.getElementById("A1").value === "California") { score = score + 1 } document.getElementById("A1").value = ""; document.getElementById("score").innerHTML = "Score:" + score }

 <p id="score">Score:0</p> <h3>Question 1:</h3> <p>Where does skateboarding originate from?</p> <input type="text" id="A1" onchange="keepScore()">

Answer 2

這取決於您是想在最后的“提交”時間（那時您需要一個表單提交按鈕）、輸入更改時還是輸入時計算分數。

假設您想要最實時的結果（在打字時），則每次在其中一個答案輸入中進行更改時，您都需要從頭開始重新計算分數：

 function keepScore() { var score = 0 if (document.getElementById("A1").value == "California") { score++ } document.getElementById("score").innerText = "Score:" + score } keepScore()

 <p id="score"></p> <h3>Question 1:</h3> <p>Where does skateboarding originate from?</p> <input type="text" oninput="keepScore()" id="A1">

Answer 3

 <p id="score">Score:</p> <h3>Question 1:</h3> <p>Where does skateboarding originate from?</p> <input type="text" id="A1" onchange="keepScore()">

 function keepScore() { if (document.getElementById("A1").value == "California") { score = score++ } document.getElementById("score").innerHTML = "Score:" + score }