如何通過單擊單詞使圖像消失？

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>