javascript - 更简洁的不区分大小写的测验验证

Question

这个问题有点晦涩且具体，所以我认为我无法在任何地方找到它，所以......

我在“测验”中有 3 个输入，只是想知道是否有更好的方法来执行以下操作:

我正在使用 If...Else... 语句来检查答案，并希望使其不区分大小写

这是(的精简版本)我的尝试...(请对我放轻松，我不是特别先进，我知道有更好的方法来实现这一目标，但我会喜欢这样做......)

<input id="ans1">
<input id="ans2">
<input id="ans3">

还有 JavaScript...

var ans1 = document.getElementById("ans1").value;
var ans2 = document.getElementById("ans2").value;
var ans3 = document.getElementById("ans3").value;
var ans1 = ans1.toLowerCase();
var ans2 = ans2.toLowerCase();
var ans3 = ans3.toLowerCase();

if (ans1 == "hola") {
   alert('Correct');
} else {
   alert('Incorrect');
  }
if (ans2 == "llamas") {
   alert('Correct');
} else {
   alert('Incorrect');
  }
if (ans3 == "me") {
   alert('Correct');
} else {
   alert('Incorrect');
  }}

所以基本上，我只是想知道是否有更简洁或更好的方法来做到这一点？

谢谢，任何帮助表示赞赏:)

Answer 1

当然，您可以使用函数来减少重复代码:

function checkAnswer(id, correctResponse) {
  var answer = document.getElementById(id).value.toLowerCase();
  if(answer === correctResponse) {
    alert("Correct");
  } else {
    alert("Incorrect");
  }
}
checkAnswer("ans1", "hola");
checkAnswer("ans2", "llamas");
checkAnswer("ans3", "me");

您还可以创建一个将元素与答案关联的对象:

var correctAnswers = {
  "ans1": "hola",
  "ans2": "llamas",
  "ans3": "me"
};
for(var id in correctAnswers) {
  var answer = document.getElementById(id).value.toLowerCase();
  if(answer === correctAnswers[id]) {
    alert("Correct");
  } else {
    alert("Incorrect");
  }
}