爲什麼我的if語句不能返回預期的結果？

我試圖做一個Catchphrase風格的遊戲，用戶逐漸點擊覆蓋圖片的方塊，直到他們可以猜出圖片中的人。相關代碼和評論如下：爲什麼我的if語句不能返回預期的結果？

//頁面刷新時要顯示的三個隨機圖像之一。

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

     }

//當用戶提交他們的答案時，如果他們的答案正確，他們會被提醒'幹得好！

 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!"); 


      } 

     }

在上面的if語句，我希望被點擊時才提交，並userGuess是正確的，randomNumber等於1，用戶被提醒「幹得好」。但是，當顯示不同的圖片（即randomImage [2]）時單擊提交按鈕時，它會將圖片更改爲randomImage [1]。

任何人都可以幫助我，告訴我爲什麼這不起作用嗎？

謝謝！

來源

2017-07-22 Filip Zindovic

我想指出的是'Math.round（randomNumber）'應該是' Math.floor（randomNumber）'。 –

請使用Stack Snippets（'[<>]'工具欄按鈕）以** runnable ** [mcve]更新您的問題，以證明問題。 –

*「但是，當顯示不同的圖片時點擊提交按鈕（即randomImage [2]），它會改變圖片爲randomImage [1]。」*聽起來像按鈕是'type =「提交「'按鈕（或者''或''，注意後者的默認類型是'submit'）。所以頁面會刷新一個新的隨機數字和圖像。但由於您沒有向我們顯示按鈕，我們無法確定。 –

按鈕提交表單並重新加載頁面。爲了避免這種情況，事件參數添加到您的點擊處理函數（例如命名爲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>

來源

2017-07-22 12:26:07 trincot

嗨Trincot，非常感謝您的幫助和努力。你的答案很棒，真的幫助我學習新東西。再次感謝！ –

爲什麼我的if語句不能返回預期的結果？

回答

相關問題