2012-03-25 4 views
1

ので、私は次のコードスニペットに問題抱えている:私はgame.guess]ボタンをクリックした後認識されて停止するjavascript関数

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Hangman</title> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

     <script type="text/javascript"> 
     <!-- 
     gallows = new Array("--------\n|  |\n|\n|\n|\n|\n=====", 
     "--------\n|  O\n|\n|\n|\n|\n=====", 
     "--------\n|  O\n|  |\n|\n|\n|\n=====", 
     "--------\n|  O\n|  \\|\n|\n|\n|\n=====", 
     "--------\n|  O\n|  \\|/\n|\n|\n|\n=====", 
     "--------\n|  O\n|  \\|/\n|  |\n|\n|\n=====", 
     "--------\n|  O\n|  \\|/\n|  |\n|  /\n|\n=====", 
     "--------\n|  O\n|  \\|/\n|  |\n| /\\\n|\n====="); 

     guessChoices = new Array("JavaScript", "Navigator", "LiveConnect", "LiveWire"); 

     guessed = []; 

     function startAgain() 
     { 
      guesses = 0; 
      max = gallows.length - 1; 
      //guessed = " "; 
      len = guessChoices.length - 1; 
      toGuess = guessChoices[Math.round(len*Math.random())].toUpperCase(); 
      displayHangman(); 
      displayToGuess(); 
      displayGuessed(); 
     } 

     function stayAway() 
     { 
      document.game.elements[3].focus(); 
      alert("Don't mess with this form element!"); 
     } 

     function displayHangman() 
     { 
      document.game.status.value=gallows[guesses]; 
     } 

     function displayToGuess() 
     { 
      pattern = ""; 

      for(i=0;i<toGuess.length;++i) 
      { 
       if(guessed.indexOf(toGuess.charAt(i)) != -1) 
        pattern += (toGuess.charAt(i)+" "); 
       else pattern += "_ "; 
      } 

      document.game.toGuess.value=pattern; 
     } 

     function displayGuessed(s) 
     { 

      result=""; 

      for(i in s) 
      { 
       guess=s[i]; 
       result += guess; 
      } 

      document.game.guessed.value=result; 

      //document.game.guessed.value=guessed; 
     } 

     function badGuess(s) 
     { 
      if(toGuess.indexOf(s) == -1) return true; 
      return false; 
     } 

     function winner() 
     { 
      for(i=0;i<toGuess.length;++i) 
      { 
       if(guessed.indexOf(toGuess.charAt(i)) == -1) return false; 
      } 
      return true; 
     } 

     function guess(s) 
     { 
      if(guessed.indexOf(s) == -1) guessed.push(s); 
      if(badGuess(s)) ++guesses; 
      displayHangman(); 
      displayToGuess(); 
      displayGuessed(guessed); 
      if(guesses >= max) 
      { 
       alert("You're dead. The word you missed was "+toGuess+"."); 
       startAgain(); 
      } 
      if(winner()) 
      { 
       alert("You won!"); 
       startAgain(); 
      } 
     } 
     // --> 
     </script> 
    </head> 
     <body> 
      <h1>Hangman</h1> 
      <form name="game"> 
       <pre> 
        <textarea name="status" rows="7" cols="16" onfocus="stayAway();"></textarea> 
       </pre> 

       <p> 
        <input type="text" name="toGuess" onfocus="stayAway();"> Word to guess<br> 
        <input type="text" name="guessed" onfocus="stayAway();"> Letters guessed so far<br> 
       </p> 

       <p>Enter your next guess.</p> 

       <p> 
        <input type="text" name="input" size=1 value=""> 
        <input type = "button" value = "guess" onclick = "guess(game.input.value); game.input.value = '';"> 
       </p> 

       <input type="button" name="restart" value="---- Start Again ----" onclick="startAgain();"> 

       <script type="text/javascript"> 
        <!-- 
        startAgain(); 
        // --> 
       </script> 
      </form> 
     </body> 
</html> 

は、最初の頃は、私が期待される出力を得ることを... game.inputがクリアされ、推測されます。しかし、私は別の値と推測]ボタンをクリックして二回目は、私はエラーが表示さ:

guess is not a function 
| onclick() 
| event = click clientX=77, clientY=33 

guess(game.input.value)     onclick(line 2) 

をそして、私は正直に理由を把握することはできません。私は間違って何をしていますか?

ありがとうございます。

(私はジェームズ・ジャウォースキーによって、マスタリングのJavaScript、プレミアムエディションからのこのコードの大部分を得た)

+4

あなたが支払った金額があまりにも高すぎないことを願っています。 – max

+0

これは、常に変数を定義する必要がある理由です。それは実際に本によって推奨されていますか?もうこの本を使わないでください。 – Ryan

+4

その本から離れて走りなさい。それは10年後の日付です。 – Corbin

答えて

4

問題は、これらの行にある:

guess=s[i]; 
result += guess; 

あなたがguessのコンテキストを変更している。この方法。この行を

に変更した場合
result += s[i]; 

エラーが表示されなくなります。 変数に同じ名前を使用して関数を競合させています。 varキーワードを使用して変数を定義し、そのような混乱を避けることを忘れないでください。

1 - 宣言し、衝突を避けるために、ローカル変数

を使用 -

2の可能な匿名関数を使用します。

+0

私はJavaScriptを学んでいたときに覚えている、私はそれが直感的なカウンターは、 "var" _contains_現在のスコープ内の変数を宣言することがわかりましたが、キーワードを省略するとグローバルスコープ内の変数を宣言します。ノートベネ! – aaaidan

0

関数displayGuessed()では、変数であるguess(関数)を推測された文字に設定しています。

function displayGuessed(s) 
{ 
    var guess; 
    result=""; 

    for(i in s) 
    { 
     guess=s[i]; 
     result += guess; 
    } 
    document.game.guessed.value=result; 
} 

ヒント:

あなたが「VAR」キーワードを使用して、機能のguess変数(関数から、それは明確な作り)を定義することによってこの問題を解決することができ、私はFirefox用のFirebugプラグインを使って、簡単にこのバグを見つけましたこれは、javascriptコードを1行ずつ進んで、どこがうまくいかないかを確認できるようにします。

関連する問題