Hangman Javascript - my code doesn't seem to be updating the word placeholder when a letter is guessed correctly

Question

So my program prints the random word to the console so I can check what the word is for testing and implementation, so when I am testing the code and guessing correct correct letters the word place holder doesn't update after the guess button is clicked it just cycles through the stages of hangman. Here's my code for the program;

    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;

Here's my code for the placeholder where to problem must be underlying, the program also runs fine I do not get any errors.

 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;
  }
}

Here's the HTML linked to the code;

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

If anyone could tell me what the problem is that would be great, thanks in advance.

Answer 1

2 problems here :

First of all, your word variable is global, so don't redefine it in your newGame() function

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

should be

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

The second problem is here :

wordLength = currentWord.length;

should be

wordLength = word.length;

Here is an edited jsFiddle :

http://jsfiddle.net/vj2rx/

Answer 2

Here you go, this is working code for you.

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;

I suggest you should make a class for this, it will be better.