javascript - 如何让这段 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") 或其他动物的等效函数。