単語をクリックして画像を消す方法は？

Question

私は小さなゲームを作ろうとしています。私は動物の4つの写真があり、写真を吹く私は4つの名前があります。ゲームは、ユーザーが右のイメージと右の名前をクリックしたときに、イメージと名前の両方が消えなければならないとします。しかし、私の場合、画像は消えるだけです。どんな助けでも本当に感謝しています。

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

代わりのボタンクリックでコードを入れて、次のようにif文の内部ではJavaScriptのそれぞれに追加します。

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

Answer 2

ここで働いていると私はあなたの達成しようとしているもののより簡単なスニペットだと思う。

選択したイメージを表す変数と、選択したボタンを表す変数が必要です。 selectedImageの値を変更する画像をクリックすると、selectedNameの値を変更するボタンをクリックすると、値の変更後、checkValues関数は、2つの値が選択されて等しいかどうかをチェックします。

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>