如何通过单击单词使图像消失？

Question

我试图制作一款小游戏。我有四张动物照片并且吹了我有四个名字的照片。游戏假设要做的是当用户点击右图和右图时，图像和名称都必须消失。但就我而言，只是图像消失了。任何帮助都非常感激。

＆＃13;

＆＃13;

var selectedImage;
var selectedName;

//Change the value of the selectedImage and check the values
function selectImage(event){
  selectedImage = event.target;
  checkValues();
}

//Change the value of the selectedName and check the values
function selectName(event){
  selectedName = event.target;
  checkValues();
}


function checkValues() {
console.log(selectedImage);
console.log(selectedName);
//Check if both values are selected
  if (!selectedImage || selectedImage == 'undefined' || !selectedName || selectedName == 'undefined'){
    return ;
  }
//Check if values are equals
  if (selectedImage.value == selectedName.value) {
    alert("good");
//remove the button and the image
    selectedImage.parentNode.style.display = 'none';
    selectedName.style.display = 'none';
  } else {
    alert("no");
  }
//Reset the selected image and name.
  selectedImage = 'undefined';
  selectedName = 'undefined';
}

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

<div class="content">

    <form>
        <input type="radio" name="animals" id="cow" class="input-hidden" value="cow"/>
        <label for="cow">
            <img src="images/cow.jpg" onclick="this.style.display='none';"  alt=""/>
        </label>

        <input type="radio" name="animals" onclick="this.style.display='none';" id="dog" class="input-hidden" value="dog"/>
        <label for="dog">
            <img src="images/dog.jpg" alt=""/>
        </label>

        <input type="radio" name="animals" onclick="this.style.display='none';" id="horse" class="input-hidden" value="horse"/>
        <label for="horse">
            <img src="images/horse.jpg" alt=""/>
        </label>

        <input type="radio" name="animals" onclick="this.style.display='none';" id="pig" class="input-hidden" value="pig"/>
        <label for="pig">
            <img src="images/pig.jpg" alt=""/>
        </label>

    </form>

</div>     

    <div class="content">


<button type="button" onclick="this.style.display='none';image_select2()" value="dog" id="dog_t">Chien</button> 
<button type="button" onclick="this.style.display='none';image_select()" value="cow" id="cow_t">Vache</button> 
<button type="button" onclick="this.style.display='none';image_select4()" value="pig" id="pig_t">Cochon</button> 
<button type="button" onclick="this.style.display='none';image_select3()" value="horse" id="horse_t">Cheval</button> 


</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

不是将代码放在按钮单击中，而是添加到if语句中的每个JavaScript，如下所示：

if (pic4 == text4) {
    Text4.style.display = 'none'
}

Answer 2

这是有效的，我认为你想要实现的目标更简单。

您必须使用变量，一个代表所选图像，另一个代表所选按钮。当您单击任何将更改selectedImage值的图片时，以及单击将更改selectedName值的按钮时。值更改后，checkValues函数检查是否选择了两个值。

var selectedImage;
var selectedName;

//Change the value of the selectedImage and check the values
function selectImage(event){
  selectedImage = event.target;
  checkValues();
}

//Change the value of the selectedName and check the values
function selectName(event){
  selectedName = event.target;
  checkValues();
}


function checkValues() {
console.log(selectedImage);
console.log(selectedName);
//Check if both values are selected
  if (!selectedImage || selectedImage == 'undefined' || !selectedName || selectedName == 'undefined'){
    return ;
  }
//Check if values are equals
  if (selectedImage.value == selectedName.value) {
    alert("good");
//remove the button and the image
    selectedImage.parentNode.style.display = 'none';
    selectedName.style.display = 'none';
  } else {
    alert("no");
  }
//Reset the selected image and name.
  selectedImage = 'undefined';
  selectedName = 'undefined';
}

<div class="content">

    <form>
        <label for="cow">
        <input type="radio" name="animals" id="cow" onclick="selectImage(event)" class="input-hidden" value="cow"/>
            <img src="images/cow.jpg" alt=""/>
        </label>

        <label for="dog">
        <input type="radio" name="animals" onclick="selectImage(event)" id="dog" class="input-hidden" value="dog"/>
            <img src="images/dog.jpg" alt=""/>
        </label>

        <label for="horse">
        <input type="radio" name="animals" onclick="selectImage(event)" id="horse" class="input-hidden" value="horse"/>
            <img src="images/horse.jpg" alt=""/>
        </label>

        <label for="pig">
        <input type="radio" name="animals" onclick="selectImage(event)" id="pig" class="input-hidden" value="pig"/>
            <img src="images/pig.jpg" alt=""/>
        </label>

    </form>

</div>     

    <div class="content">


<button type="button" onclick="selectName(event)" value="dog" id="dog_t">Chien</button> 
<button type="button" onclick="selectName(event)" value="cow" id="cow_t">Vache</button> 
<button type="button" onclick="selectName(event)" value="pig" id="pig_t">Cochon</button> 
<button type="button" onclick="selectName(event)" value="horse" id="horse_t">Cheval</button> 


</div>