2

私はjavascriptとhtmlを初めて使用するので、誰かが私のコードを覗いて、特定の構文が機能しない理由を教えてくれることを期待していました。以下のコードでは、document.getElementByIdを使用して、毎回操作する要素を取得しています。私はそれらをgameTime（）内でローカル変数として宣言し、関数全体で使用します。

    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")
    }

次に、2つの要素をグローバルに宣言して、まったく機能していないように見えるすべての関数で使用してみましたが、その理由がわかりません。

    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ファイルに付随するhtmlファイルは次のとおりです。guess.jsは最初のコードブロックであり、guessAgain.jsは2番目のコードブロックです。

    <!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>

あなたが私に与えることができるどんな洞察にも感謝します。

4

2 に答える 2

1

element.valueに推測を設定しています

そのはず

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

問題は、guessここで要素として使用していることです。

guess.value = "";

guessまた、文字列として使用する場所をに変更する必要がありますguess.value。

于 2012-08-04T05:31:48.797 に答える
1

問題1： ボディがロードされる前に以下を呼び出しているため、未定義が返されます。

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と、入力フィールドの最新の値が返されます。

（実例）

不必要に複雑なことで以下は間違いではありません。

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

代わりに、有効な推測と見なされたら、つまり最後にnumGuessesをインクリメントできます。

于 2012-08-04T05:40:33.297 に答える