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

Question

我正在尝试创建一个小游戏。我有四个动物图片，吹了我的图片我有四个名字。游戏假设用户点击右侧图像并右键命名图像和名称必须消失。但在我的情况下，图像消失。任何帮助真的很感激它。

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

Answer 1

而不是把代码中的按钮点击，添加到每个JavaScript的的if语句里面是这样的：

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>