Question

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

我的脚本看起来像这样，我想知道如何缩短它，因为会有更多这样的练习。正如你所看到的，每个函数都做同样的事情。可能的答案只有三个：＆＃39;是＆＃39;，＆＃39;是＆＃39;和＆＃39; am＆＃39;。

有人帮忙吗？

<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')

从一段代码中提取公共元素（如果需要，参数化该代码）被称为“重构”。

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

Answer 2

您正在使用不必要的长调用来获取对象，例如：

document.getElementById('err1');

通过对a变量执行的操作，您可以大大缩短代码。如：

var err3 = document.getElementById('err3');

之后你可以这样做：

if(a.value == "is") {
    err3.innerHTML= 'Correct!';
    err3.style.color = "green";
} else{
    err3.innerHTML= 'Wrong :( Try again!';
    err3.style.color = "red";
}

另外，请注意您有一个名为a的函数，其中包含一个名为a的变量。小心......在某些情况下它可能很有用，但考虑到你在这里要求的那种帮助，你可能应该避免在其中给出一个函数和变量同名。

Answer 3

 function displayMessage(inputId, messageId, valueToCheck) {
        var inputEle = document.getElementById(inputId),
            messageEle = document.getElementById(messageId);
        if (inputEle && messageEle) {
            if (inputEle.value == valueToCheck) {
                messageEle.innerHTML = 'Correct!';
                messageEle.style.color = "green";
            }
            else {
                messageEle.innerHTML = 'Wrong :( Try again!';
                messageEle.style.color = "red";
            }
        }
    }

检查这个jsfiddle

http://jsfiddle.net/7v7y5/

如何缩短我在javascript中的功能？

3 个答案: