ハングマンゲームのクリック時のトリガー機能

私はJavaScriptを初めて使い、このハングマンゲームをコード化しようとしていますが、問題が発生しています。ハングマンゲームのクリック時のトリガー機能

私のHTML：：

<div class="col-md-4"> 
    <div id="placeHolder">_ _ _ _ _ _</div> 
    <div id="gamestatus"></div> 
    <input type="text" size="1" id="letterGuess" maxlength="1"> 
    <button id="button" onclick="guess()">Press to start</button> 
</div>

私はJavaScript：

var dictionary = ['music', 'mountain', 'forest', 'florida', 'sweden', 'golf']; 
var wordUsed, input, placeHolder; 

function startGame() 
{ 
    placeHolder = ""; 
    var totalGuesses = 10; 
    wordUsed = dictionary[Math.floor(Math.random() * dictionary.length)]; 
    console.log(wordUsed); 

    var buttonText = document.getElementById("button").innerHTML = "Guess"; 

    for(var i = 0; i < wordUsed.length; i++) 
    { 
     placeHolder += "_ "; 
    } 

    document.getElementById("placeHolder").innerHTML = placeHolder; 
    document.getElementById("gamestatus").innerHTML = "Game is in progress."; 

} 

function guess() 
{ 
    var correctGuess = false; 
    var ip = document.getElementById("letterGuess"); 
    input = ip.value; 

    for(var i = 0; i < wordUsed.length; i++) 
    { 
     if(input == wordUsed.substring(i, i + 1)) 
     { 
      correctGuess = true; 
      placeHolder = placeHolder.substring(0, i) + input + placeHolder.substring(i + 1, placeHolder.length + 1); 
      document.getElementById("placeHolder").innerHTML = placeHolder; 
     } 
    } 
    if(!correctGuess) 
    { 
     totalGuesses--; 
    } 
    if(placeHolder == wordUsed) 
    { 
     alert("You WIN!"); 
    } 
    if(totalGuesses == 0) 
    { 
     alert("You LOSE!") 
     startGame(); 
    } 
} 
startGame(); 
document.getElementById("button").onclick = guess;

ので、コードが正しく単語を選択し、場所でアンダースコアの正しい量を置いている私は遠くに持っていることは以下のとおりです。手紙のコードを実行すると何も起こりません。本当にシンプルなものを見過ごしてしまったかもしれないし、誰かがコードやロジックに間違っていることを指摘できるかどうか本当に感謝するだろう。

また、コード/ロジックを改善する方法についての他のヒントもありがとうございます。ありがとう。

出典

2016-07-01 LearningJS888

あなたのコードの最後の行をあなたを取得します：

document.getElementById("button").onclick = letterGuess;

あなたは関数としてletterGuess()宣言されていません。

document.getElementById("button").addEventListener("click", guess);

このボタンをクリックするたびに、あなたのguess()機能を実行します：あなたは、おそらくこのような何かをしたいです。さらに<button>

から属性onclick=""を削除する必要があります/削除する必要があります。ここにはjsfiddleがあります。あなたのhtmlが正しく設定されていて、実際にスクリプトをロードしていますか？

あなたのHTMLは次のようになります。

<!DOCTYPE html> 
<html> 
<head></head> 

<body> 
    <!-- your game html --> 
    <script type="text/javascript" src="game.js"></script> 
</body> 
</html>

letterGuessは、単にタイプミスしてくださいだった場合、あなたのguess()機能でconsole.log()何か、必ずそれをクリックした後に実行されています作るためにボタン。

出典

2016-07-01 20:06:52

私はletterGuess-mistakeを修正し、

letterGuessという機能はありませんが、クリックすると呼び出されます。 guessにその呼び出しを変更すると、どこか

出典

2016-07-01 20:06:39 kwphl

それを編集、それは間違いでした。しかし、問題は解決しませんでした。 @kwphl – LearningJS888

私はあなたが持っている問題を理解していない可能性があります...私はあなたのコードをペンに貼り付けました：http://codepen.io/anon/pen/vKmVVwと私はテキストボックスに正しい文字を追加し、予想通りに手紙に手紙を載せていると推測する。 – kwphl

ええ、それは私のために働いたあまりにも - 私はセミコロンが不足してしまった。しかし、正しい文字が入力されると、文字間のスペースが狂ってしまいます。ユーザーが「あなたが勝つ」メッセージを見ることができなくなります。それを修正する方法の手がかりは？ @kwphl – LearningJS888

Totalguessesをグローバル変数に修正してください。 startGame()関数のローカルです。

正常に動作しています。推測の文字は小文字にする必要があります。

ワーキングJSFiddle here

出典

2016-07-01 20:23:37

私はそれをグローバルに移動しました。しかし、JSのフィドルは働いていない - 私はまだローカル変数@ Ransher.singhとしてtotalGuessesを参照してください私のバージョン（壊れたもの）を投稿したかもしれないように見えます – LearningJS888

ハングマンゲームのクリック時のトリガー機能

答えて

関連する問題