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猜测游戏

回答

相关问题