Hang子手Javascript - 我的代碼似乎沒有更新字佔位符時，一個字母被猜對了

Question

所以我的程序打印隨機字到控制檯，所以我可以檢查這個詞是測試和實施，所以當我我正在測試代碼並猜測正確的字母，單詞佔位符在點擊猜測按鈕後沒有更新，它只是在hangman階段循環。這是我的程序代碼;

var wordsArray = ["monitor", "program", "application", "keyboard", "javascript", "gaming", "network"]; 
var word; 
var goesLeft; 
var placeholder; 
var input; 
var wordLength; 
var wordSubstring; 
var currentWord; 

    function newGame() 
    { 

    placeholder = ""; 
    goesLeft = 10; 
    var word = wordsArray[Math.floor(Math.random() * wordsArray.length)]; 
    currentWord = 0; 
    word = wordsArray[currentWord]; 
    wordLength = currentWord.length; 
    wordSubstring = currentWord.substring; 
    console.log(word); 
    var myElement = document.getElementById("button").innerHTML = "Click to guess"; 
    var myPicElement = document.getElementById("hangimage").src = "http://fetlar.kingston.ac.uk/pp/hangman10.jpg"; 

    for (var count = 0; count < word.length; count++) 
    { 
     placeholder = placeholder + "-"; 
    } 

    document.getElementById("placeholder").innerHTML = placeholder; 
    document.getElementById("gamestatus").innerHTML = "Game running"; 
    } 

    function guessLetter() 
    { 
    var correct = 0; 

    var inputBox = document.getElementById("guessinput"); 
    input = inputBox.value; 


    console.log(word); 

    for (var count = 0; count < wordLength; count++) 
    { 
     if (input == word.substring(count, count + 1)) 
     { 
     correct++; 
     placeholder = placeholder.substring(0, count) + input + placeholder.substring(count + 1, placeholder.length + 1); 
     document.getElementById("placeholder").innerHTML = placeholder; 
     } 
    } 

    if (correct == 0) 
    { 
     goesLeft--; 
    } 
    var url = document.getElementById("hangimage").src = "http://fetlar.kingston.ac.uk/pp/hangman" + goesLeft + ".jpg"; 

    if (placeholder == word) 
    { 
     document.getElementById("hangimage").src = "http://fetlar.kingston.ac.uk/pp/hangman_win.jpg"; 
     alert("You guessed the word correctly. You win!"); 
    } 

    if (goesLeft == 0) 
    { 
     alert("You lose"); 
     newGame(); 
    } 
    } 
newGame(); 
document.getElementById("button").onclick = guessLetter; 

這裏是我的代碼佔位符問題必須在底層，程序也運行良好我沒有得到任何錯誤。

for (var count = 0; count < wordLength; count++) 
{ 
    if (input == word.substring(count, count + 1)) 
    { 
    correct++; 
    placeholder = placeholder.substring(0, count) + input + placeholder.substring(count + 1, placeholder.length + 1); 
    document.getElementById("placeholder").innerHTML = placeholder; 
    } 
} 

下面是鏈接到代碼的HTML;

<div style="text-align: center;"> 
    <h1>Hangman</h1> 
    <img id="hangimage" src="http://fetlar.kingston.ac.uk/pp/hangman9.jpg" /> 
    <div id="placeholder" style="font-size: 1.5em; font-family: monotype; color: red;">-------</div> 
    <div id="gamestatus">Game running</div> 
    <input id="guessinput" type="text" size="1" /> 
    <button id="button">Click to guess</button> 
    <br/> 
    <div>Guessed Letters</div> 
    <div id="guessedletters">(guessed letters will go here)</div> 
</div> 

如果有人能告訴我問題是什麼，那將是偉大的，在此先感謝。

Answer 1

2個問題在這裏：

首先，你的字變量是全球性的，所以不要重新定義它在你的newGame()功能

var word = wordsArray[Math.floor(Math.random() * wordsArray.length)]; 

應該

word = wordsArray[Math.floor(Math.random() * wordsArray.length)]; 

第二問題在這裏：

wordLength = currentWord.length; 

應該

wordLength = word.length; 

下面是經編輯的jsfiddle：

http://jsfiddle.net/vj2rx/

Answer 2

在這裏你去，這是工作的代碼爲您服務。

var wordsArray = ["monitor", "program", "application", "keyboard", "javascript", "gaming", "network"]; 
var word; 
var goesLeft; 
var placeholder; 
var input; 
var wordLength; 
var currentWord; 

    function newGame(){ 
    placeholder = ""; 
    goesLeft = 10; 
    word = wordsArray[getRandom(0,wordsArray.length)]; 
    wordLength = word.length; 
    console.log(word); 
    var myElement = document.getElementById("button").innerHTML = "Click to guess"; 
    var myPicElement = document.getElementById("hangimage").src = "http://fetlar.kingston.ac.uk/pp/hangman10.jpg"; 

    for (var count = 0; count < word.length; count++) 
    { 
      placeholder = placeholder + "-"; 
    } 

    document.getElementById("placeholder").innerHTML = placeholder; 
    document.getElementById("gamestatus").innerHTML = "Game running"; 
    } 
    function getRandom(min,max){ 
    return Math.floor(Math.random() * (max - min) + min); 
    } 
    function guessLetter() 
    { 
    var correct = 0; 

    var inputBox = document.getElementById("guessinput"); 
    input = inputBox.value; 


    for (var count = 0; count < wordLength; count++) 
    { 
     if (input == word.substring(count, count + 1)) 
     { 
     correct++; 
     placeholder = placeholder.substring(0, count) + input + placeholder.substring(count + 1, placeholder.length + 1); 
     document.getElementById("placeholder").innerHTML = placeholder; 
     } 
    } 

    if (correct == 0) 
    { 
     goesLeft--; 
    } 
    var url = document.getElementById("hangimage").src = "http://fetlar.kingston.ac.uk/pp/hangman" + goesLeft + ".jpg"; 

    if (placeholder == word) 
    { 
     document.getElementById("hangimage").src = "http://fetlar.kingston.ac.uk/pp/hangman_win.jpg"; 
     alert("You guessed the word correctly. You win!"); 
    } 

    if (goesLeft == 0) 
    { 
     alert("You lose"); 
     newGame(); 
    } 
    } 
newGame(); 
document.getElementById("button").onclick = guessLetter; 

我建議你應該爲此做一個類，它會更好。