javascript - 如何缩短我在 javascript 中的函数？

Question

好吧，我知道这可能是我的另一个愚蠢问题，但我已经厌倦了寻找答案，而且我还不够聪明，无法自己找出答案。

我的脚本看起来像这样，我想知道我怎样才能让它更短，因为会有更多这样的练习。如您所见，每个函数都做同样的事情。可能的答案只有三个:"is"、"is"和"is"。

有人帮忙吗？

<p>1. He <input type="text" id="ex1.1" size="4"> funny. <input type="button" value="Check!" onclick="a()"> <span id="err1"></span></p>

<script>
function a() {
   var a=document.getElementById("ex1.1");
   if((a.value=="is")) {
      document.getElementById('err1').innerHTML= 'Correct!';
      document.getElementById('err1').style.color = "green";
   } else {
      document.getElementById('err1').innerHTML= 'Wrong :( Try again!';
      document.getElementById('err1').style.color = "red";
   }

}
</script>

<p>2. I <input type="text" id="ex1.2" size="4"> cool. <input type="button" value="Check!" onclick="b()"> <span id="err2"></span></p>
<script>

function b()
{
   var a=document.getElementById("ex1.2");
   if((a.value=="am")) {
      document.getElementById('err2').innerHTML= 'Correct!';
      document.getElementById('err2').style.color = "green";
   } else {
      document.getElementById('err2').innerHTML= 'Wrong :( Try again!';
      document.getElementById('err2').style.color = "red";
   }

}
</script>

<p>3. She <input type="text" id="ex1.3" size="4"> pretty. <input type="button" value="Check!" onclick="c()"> <span id="err3"></span></p>
<script>

function c() {
   var a=document.getElementById("ex1.3");
   if((a.value=="is")) {
      document.getElementById('err3').innerHTML= 'Correct!';
      document.getElementById('err3').style.color = "green";
   } else {
      document.getElementById('err3').innerHTML= 'Wrong :( Try again!';
      document.getElementById('err3').style.color = "red";
   }
}
</script>

<p>4. We <input type="text" id="ex1.4" size="4"> fast. <input type="button" value="Check!" onclick="d()"> <span id="err4"></span></p>
<script>

function d()
{
   var a=document.getElementById("ex1.4");
   if((a.value=="are")) {
      document.getElementById('err4').innerHTML= 'Correct!';
      document.getElementById('err4').style.color = "green";
   }  else {
      document.getElementById('err4').innerHTML= 'Wrong :( Try again!';
      document.getElementById('err4').style.color = "red";
   }
}
</script>

Answer 1

每个函数中只有三件事会发生变化 - 元素 ID 和所需的答案 - 因此这些应该是参数。

您还应该在函数本身内应用不要重复自己 (DRY) 原则，避免重复不必要地调用 document.getElementById

function checkAnswer(inputId, outputID, rightAnswer) {
    var input = document.getElementById(inputId);
    var output = document.getElementById(outputId);
    var correct = (input.value === answer);

    // remainder left as an exercise for the OP, except to
    // note that the code would be potentially shortened
    // even further with use of the ternary ?: operator
    // instead of an if/else branch
    ...
}

示例用法:

checkAnswer('ex1.2', 'err2', 'am')

从一段代码中提取公共(public)元素(并在必要时对该代码进行参数化)称为“重构”。

您应该注意，只有 HTML5 允许带有小数点的元素 ID。你最好使用下划线。