Javascript猜測遊戲

我是全新的JavaScript和HTML，所以我希望有人可以偷看我的代碼，並告訴我爲什麼某些語法不工作。在下面的代碼中，我使用document.getElementById來檢索每次想要處理的元素。我將它們聲明爲gameTime（）中的局部變量，並在整個函數中使用它。Javascript猜測遊戲

var randNum = Math.floor(100*Math.random()) +1; 
    var numGuesses = 0; 

    function gameTime() 
    { 
     var guess = document.getElementById("guess").value; 
     var status = document.getElementById("status"); 

     numGuesses++; 

     if(guess == "") 
     { 
      alert("You did not guess a number!") 
      numGuesses--; 
     } 
     else if(guess == randNum) 
      status.value += (guess + " was the right number! It only took you " + numGuesses + " tries" + "\r") 
     else if(guess > randNum) 
      status.value += (guess + " is too high!" + "\r") 
     else  
      status.value += (guess + " is too low!" + "\r") 

     document.getElementById("guess").value = ""; 
    } 

    function reset() 
    { 
     randNum = Math.floor(100*Math.random()) +1; 
     numGuesses = 0; 
     document.getElementById("guess").value = ""; 
     document.getElementById("status").value = ""; 
    } 

    function quit() 
    { 
     document.getElementById("status").value += ("The correct number was " + randNum + "!\r") 
    }

然後，我通過全球範圍內聲明兩個元素，並在每它似乎並沒有在所有的工作，我只是不明白爲什麼函數中使用它試了一下。

var randNum = Math.floor(100*Math.random()) +1; 
    var numGuesses = 0; 
    var guess = document.getElementById("guess").value; 
    var status = document.getElementById("status"); 

    function gameTime() 
    { 
     numGuesses++; 

     if(guess == "") 
     { 
      alert("You did not guess a number!") 
      numGuesses--; 
     } 
     else if(guess == randNum) 
      status.value += (guess + " was the right number! It only took you " + numGuesses + " tries" + "\r") 
     else if(guess > randNum) 
      status.value += (guess + " is too high!" + "\r") 
     else  
      status.value += (guess + " is too low!" + "\r") 

     guess.value = ""; 
    } 

    function reset() 
    { 
     randNum = Math.floor(100*Math.random()) +1; 
     numGuesses = 0; 
     guess.value = ""; 
     status.value = ""; 
    } 

    function quit() 
    { 
     status.value += ("The correct number was " + randNum + "!\r") 
    }

這裏還有伴隨這些js文件guess.js是第一個代碼塊的HTML文件，guessAgain.js是第二個代碼塊。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      <title>Guessing Game</title> 
      <script type="text/javascript" src="guessAgain.js"></script> 
     </head> 
     <body> 
      <label for = "guess"> Your Guess: </label> 
      <input type = "text" id = "guess" value = "" />  
      <input type = "button" onclick = "gameTime()" value = "Submit" /> 
      <input type = "button" onclick = "reset()" value = "New Game" /> 
      <input type = "button" onclick = "quit()" value = "Quit" /> 
      <br>  
      <textarea id = "status" rows = "10" cols = "52"></textarea> 
     </body> 
    </html>

感謝您的任何見解，你可以給我。

來源

2012-08-04 user1575604

你可以考慮提供一個http://jsfiddle.com，以便人們可以輕鬆地嘗試上面的代碼/程序。 – 2012-08-04 17:46:06

問題1： 您在body加載之前調用以下內容，因此它們返回undefined。

var guess = document.getElementById("guess"); 
var status = document.getElementById("status");

只有在onload()事件中的物體加載後，才應該執行這些操作。

問題2：

此外，當您本身的價值分配給一個變量，它不更新的文本框是。 var guess = document.getElementById("guess").value，則guess的值在更改文本框時不會更新。

如果您參考var guess = document.getElementById("guess")，則反覆調用 guess.value將返回輸入字段的最新值。

(Working Example)

以下是沒有錯不必要複雜。

 numGuesses++; 
     if(guess.value == "") 
     { 
      alert("You did not guess a number!") 
      numGuesses--; 
     } 
     ...

相反，一旦它被認爲是有效的猜測，即在最後，你可以增加numGuesses。

來源

2012-08-04 05:40:33

在你的幫助下，我明白了。我今天早上醒來，想起了我給var guess和var status的任務，並意識到爲什麼它不起作用。 onload（）事件也有幫助。再次感謝。 – user1575604 2012-08-05 15:49:45

乾杯:)如果能幫助解決您的問題，請將上述標記爲答案。 – 2012-08-05 16:28:02

你設定猜element.value

應該

var guess = document.getElementById("guess");

問題是，你正在使用guess作爲一個元素在這裏：

guess.value = "";

你還需要修改您使用guess作爲字符串的地方guess.value。

來源

2012-08-04 05:31:48 Dogbert

如果是這樣的話，那麼需要另一種修改來考慮'猜測'不再是一個值，而是一個元素，所以if條件應該是'if（guess.value ==「」）'等等上。 – Ahmad 2012-08-04 05:35:21

@ Ahmad-San正確，謝謝，更新了答案。 – Dogbert 2012-08-04 05:37:02

Javascript猜測遊戲

回答

相關問題