title: How to make a Hangman game in JS
body: <p>I am trying to make a hangman game in JS. I have the following functions working. The computer displays a random word from my array. I print the keys pressed to the screen and give the user 10 keystrokes before they loose. The problem I am having is getting the array to display in the var possibleWord section so it displays as blank spaces or dashes. Thank you for your help in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Computer picks random word to guess
  function getItem() {
    //Possible words to guess
    var words = ['jason', 'kaitlyn', 'lora', 'matthew'];
    document.getElementById("wordGuess").innerHTML = words[Math.floor(Math.random() * words.length)];
  
    //Displays possible words blank spaces
    var possibleWord = "J A S O N";
    var blankSpaces = "";
    var wordLength = possibleWord.length;
  
    for (i = 0; i &lt; wordLength; i++) {
      var x = possibleWord.charAt(i);
  
      if (x === " " || x === "/'") {
        blankSpaces += x;
      } else {
        blankSpaces += "_";
      }
    }
    document.getElementById("blankSpaces").innerHTML = blankSpaces;
  }
  
  //This code captures the keypress and prints it out on the screen
  var guessesLeft = 9;
  
  document.onkeypress = function(keyPressed) {
    var keyPressed = keyPressed || window.event,
      charCode = keyPressed.keyCode || keyPressed.which,
      lettersGuessed = String.fromCharCode(charCode);
  
    // var userGuess = prompt("What word do you guess?");
    // var userGuess = words.split('');
    // var userGuess
    // if (words.indexOf(userGuess) &gt; -1) {
    //  alert("Your guess is correct.")
    // }else {
    //  alert("Your guess is wrong.")
    // }
  
    document.getElementById("lettersGuessed").innerHTML += lettersGuessed;
    document.getElementById("guessesLeft").innerHTML = guessesLeft;
  
    guessesLeft--;
  
    if (guessesLeft === -1) {
      alert("You Loose!");
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body onload="getItem()"&gt;
    &lt;div class="wrapper"&gt;
      &lt;div class="container"&gt;
        Press any key to get started!
        &lt;br&gt;
        &lt;br&gt;Wins: # of times user guessed the word correctly
        &lt;br&gt;
        &lt;br&gt;Display random word from Array: &lt;strong&gt;&lt;u&gt;&lt;span id="wordGuess"&gt;&lt;/span&gt;&lt;/u&gt;&lt;/strong&gt;
        &lt;br&gt;
        &lt;br&gt;as the user guesses the correct letter, make the word display like this: &lt;span id="blankSpaces"&gt;&lt;/span&gt;
        &lt;br&gt;
        &lt;br&gt;Number of Guesses Remaining: &lt;span id="guessesLeft"&gt;10&lt;/span&gt;
        &lt;br&gt;
        &lt;br&gt;Letters Already Guessed: &lt;span id="lettersGuessed"&gt;&lt;/span&gt;
        &lt;br&gt;
        &lt;br&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>