Javascript，对乘法选项进行评分

Question

我已经阅读了很多主题，但我仍然不知道我必须写什么才能使我的 check() 工作。

当您选择一个选项时，它会生成多个问题(1 x 1 1 x 2 等)，然后用户需要填写正确的答案，当按下提交按钮时，需要将好的答案变成绿色，并且错误的答案呈红色。

我尝试了很多方法，但这次我就是看不到，哈哈。谁能告诉我或带我走向正确的方向，我需要在 calc() 中写什么

感谢您的帮助:)

<div id="section">
  <h2>De toets</h2>
  <p>Welke toets wil je maken?</p>
  <label for="toetsmenu"></label>
  <select id="toetsmenu" onchange="toets()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
  <div id="toetsding"></div>
  <script>
    function toets() {
      var x = document.getElementById("toetsmenu").value;

      document.getElementById("toetsding").innerHTML = "";
      for (i = 1; i < 11; i++) {
        document.getElementById("toetsding").innerHTML += x + " x " + i +
          " = <input type='text' id='test'>" + "<br>";
      }
      document.getElementById("toetsding").innerHTML += "<input type='submit' value='check' id='sub' onclick='calc()'>"
    }

    function calc() {

    }
  </script>
</div>

Answer 1

创建<input>时您需要为每个元素提供唯一的 ID:id='test" + i + "

在 calc()函数，然后您可以简单地通过循环中的 ID 访问它们并检查结果

function toets() {
  var x = document.getElementById("toetsmenu").value;

  document.getElementById("toetsding").innerHTML = "";
  for (i = 1; i < 11; i++) {
    document.getElementById("toetsding").innerHTML += x + " x " + i +
      " = <input type='text' id='test" + i + "'>" + "<br>";
  }
  document.getElementById("toetsding").innerHTML += "<input type='submit' value='check' id='sub' onclick='calc()'>"
}

function calc() {
  var x = document.getElementById("toetsmenu").value

  for (i = 1; i < 11; i++) {
    var input = document.getElementById("test" + i)
    var result = input.value
    console.log(input.value)
    if (result == x * i) {
      input.className = "correct"
    } else {
      input.className = "wrong"
    }
  }

}

toets()

.wrong {
  background-color: red;
}
.correct {
  background-color: green;
}

<div id="section">
  <h2>De toets</h2>
  <p>Welke toets wil je maken?</p>
  <label for="toetsmenu"></label>
  <select id="toetsmenu" onchange="toets()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
  <div id="toetsding"></div>
</div>