if文が期待した結果を返さないのはなぜですか？

Question

私は、写真の人物を推測できるまで、ユーザーが徐々に画像を覆う四角形をクリックするキャッチフレーズスタイルのゲームを作ろうとしています。関連するコードとコメントは次のとおりです。

//ページが更新されるときに表示される3つのランダムな画像のうちの1つです。

 var randomImage = new Array(); 
     randomImage[0] = "/IMAGES/0.jpg" 
     randomImage[1] = "/IMAGES/1.jpg" 
     randomImage[2] = "/IMAGES/2.jpg" 

     var randomNumber = Math.random(); 

     randomNumber = randomNumber * randomImage.length; 

     randomNumber = Math.round(randomNumber); 

     if (randomNumber == 0) { 

      document.getElementById("backPic").src="../IMAGES/0.jpg"; 

     } 

     else if (randomNumber == 1) { 

      document.getElementById("backPic").src="../IMAGES/1.jpg"; 

     } 

     else { 

      document.getElementById("backPic").src="../IMAGES/2.jpg"; 

     } 

//ユーザーが回答を提出したときに、正しい場合は「よく完了！」と警告されます。上記のif文で

 document.getElementById("submitGuess").onclick = function() { 

      var correctAnswer0 = "Terry"; 

      var correctAnswer1 = "Drogba"; 

      var correctAnswer2 = "Lampard"; 

      if (document.getElementById("userGuess").value == correctAnswer1 && randomNumber == 1){ 


        alert("Well done!"); 


      } 

     } 

は、私がクリックされたときにのみ提出することを期待する、とuserGuessが正しいと乱数は、ユーザーが「よくやった」警告されることを、1に等しいです。しかし、別の画像が表示されたときに送信ボタンがクリックされると（すなわち、randomImage [2]）、代わりに画像がrandomImage [1]に変更されます。

誰も私を助けて、なぜこれが機能しないのか教えてください。

ありがとうございました！

Answer 1

ボタンがフォームを送信するため、ページがリロードされます。これを避けるために、あなたのクリックハンドラ関数にイベントパラメータを追加します（例えば、それeに名前を付ける）し、実行します。

e.preventDefault(); 

これは、ページをリロードしていないため、フォームの送信をキャンセルします。あなたのコードはより良いデータ構造を用いることで、多くのことを低減することができる

注：

// One of three random images to be displayed when page refreshes. 
 
var persons = [ 
 
    {name: "Terry", img: "https://upload.wikimedia.org/wikipedia/commons/f/f8/John_Terry_during_a_match_vs_Everton_at_Stamford_Bridge_in_2006.jpg"}, 
 
    {name: "Drogba", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Didier_Drogba_9248.JPG/399px-Didier_Drogba_9248.JPG"}, 
 
    {name: "Lampard", img: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Frank_Lampard%2713-14.JPG/399px-Frank_Lampard%2713-14.JPG"} 
 
]; 
 
var randomNumber = Math.floor(Math.random() * persons.length); 
 
backPic.src = persons[randomNumber].img; 
 

 
// When user submits their answer, if they are correct, they are alerted 'Well done!' 
 
submitGuess.addEventListener("click", function(e) { 
 
    alert(userGuess.value == persons[randomNumber].name 
 
      ? "Well done!" 
 
      : "Try again" 
 
    ); 
 
    e.preventDefault(); // cancel form submission. 
 
});

<form> 
 
<img id="backPic" width="20%" height="20%"><br> 
 
Guess:<input id="userGuess"> 
 
<button id="submitGuess">Guess</button> 
 
</form>