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

Question

好吧，我知道這可能是我另一個愚蠢的問題，但是我已經厭倦了尋找答案，而且我還不夠聰明，無法自己弄清楚。

我的腳本看起來像這樣，我想知道如何才能縮短它，因為會有更多這樣的練習。 如您所見，每個函數都做同樣的事情。 可能的答案只有三個：“是”，“是”和“上午”。

有人幫忙嗎？

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

從一段代碼中提取公共元素（並在必要時對該代碼進行參數化）被稱為“重構”。

您應注意，僅在HTML5中允許使用帶小數點的元素ID。 使用下划線會更好。

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/