如何使此JavaScript代码更短？

Question

我之前创建了这个小游戏，现在我试图找到一种方法，使其脚本更简单，我想知道是否有其他方法。我有四个动物图片，吹了我的图片我有四个名字。游戏假设用户点击右侧图像并右键命名图像和名称必须消失。任何帮助非常感激

function image_select() { 
 
    var pic1 = document.getElementById("cow").value; 
 
    var text1 = document.getElementById("cow_t").value; 
 

 
    if (document.getElementById("cow").checked) { 
 
     if (pic1 == text1) { 
 
      var x = document.getElementById("cow_s"); 
 
      x.play(); 
 
     } else { 
 
      alert("wrong selection"); 
 
     } 
 
    } else { 
 
     alert("no"); 
 
    } 
 
} 
 

 
function image_select2() { 
 
    var pic2 = document.getElementById("dog").value; 
 
    var text2 = document.getElementById("dog_t").value; 
 

 
    if (document.getElementById("dog").checked) { 
 
     if (pic2 == text2) { 
 
      var x = document.getElementById("dog_s"); 
 
      x.play(); 
 
     } else { 
 
      alert("wrong selection"); 
 
     } 
 
    } else { 
 
     alert("no"); 
 
    } 
 

 
} 
 

 

 
function image_select3() { 
 
    var pic3 = document.getElementById("horse").value; 
 
    var text3 = document.getElementById("horse_t").value; 
 

 
    if (document.getElementById("horse").checked) { 
 
     if (pic3 == text3) { 
 
      var x = document.getElementById("horse_s"); 
 
      x.play(); 
 
     } else { 
 
      alert("wrong selection"); 
 
     } 
 
    } else { 
 
     alert("no"); 
 
    } 
 

 
} 
 

 
function image_select4() { 
 
    var pic4 = document.getElementById("pig").value; 
 
    var text4 = document.getElementById("pig_t").value; 
 

 
    if (document.getElementById("pig").checked) { 
 
     if (pic4 == text4) { 
 
      var x = document.getElementById("pig_s"); 
 
      x.play(); 
 
     } else { 
 
      alert("wrong selection"); 
 
     } 
 
    } else { 
 
     alert("no"); 
 
    } 
 

 
}

<div style="margin-left:230px;"> 
 
    <br> 
 
    <br> 
 
<img onmousedown="dog.play()" height="142" width="142" src="image/cow.jpg" alt="Cow" data-value="cow" onclick="selectImage(event)" /> 
 
<img height="142" width="142" src="image/dog.jpg" alt="" data-value="dog" onclick="selectImage(event)"/> 
 
    <img height="142" width="142" src="image/horse.jpg" alt="" data-value="horse" onclick="selectImage(event)"/> 
 
    <img height="142" width="142" src="image/pig.jpg" data-value="pig" onclick="selectImage(event)"/> 
 
</div> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    
 
    <div style="margin-left:400px;"> 
 
    <button type="button" onclick="selectName(event)" value="pig" id="pig_t">Cochon</button> 
 
    <button type="button" onclick="selectName(event)" value="cow" id="cow_t">Vache</button> 
 
    <button type="button" onclick="selectName(event)" value="horse" id="horse_t">Cheval</button> 
 
    <button type="button" onclick="selectName(event)" value="dog" id="dog_t">chien</button> 
 
    </div> 
 

Answer 1

只要把动物的名字的函数（事实上，你好像已经这样做，因为你将事件传递给selectName，但我在代码中看不到这个函数）：

function image_select_animal(prefix) { 
    var pic = document.getElementById(prefix).value; 
    var text = document.getElementById(prefix + "_t").value; 

    if (document.getElementById(prefix).checked) { 
    if (pic == text) { 
     var x = document.getElementById(prefix + "_s"); 
     x.play(); 
    } else { 
     alert("wrong selection"); 
    } 
    } else { 
    alert("no"); 
    } 
} 

和onclick，呼叫image_select_animal("pig")或其他动物的等价物。

Answer 2

function image_select(name) { 
    var el = document.getElementById(name); // create this variable, as you use this element twice. Less DOM lookups. 
    var pic = el.value; // get the value of the `el` variable 
    var text = document.getElementById(name + '_t').value; 

    if (!el.checked) { // if not check 
     alert('no'); 
     return; // return ends the function immediately, meaning the following lines are not read 
    } 

    if (pic != text) { 
     alert('wrong selection'); 
     return; // return ends the function immediately, meaning the following lines are not read 
    } 

    document.getElementById(name + '_s').play(); // no need to store this in variable x, as you only use this element once. 
}