title: Replacing underscores with letters of corresponding word in Hangman game in Javascript
body: <p>I’ve been searching for the answers to a couple of questions about a Hangman game that I’m working on but I can’t seem to come across a solution that works for me. From what I’ve found it looks like maybe I’d have to use a global regular expression so that way it replaces every instance of the matching letter???</p>
  
  <p>Here are the 3 main problems I’m having:</p>
  
  <ol>
  <li><p>I’m not sure how to get the letters to show up in place of where they correspond with the underscores. So for example, if the word is ‘apple’ I have my code pushing out blanks as 
  __ __ __ __ __, then when a user presses the P key, I’d want it to update the word to __ P P __ __, then if they pressed the A key I’d want it to change to A __ P P __ __. Currently I have it set up so if you press any letter that is correct in the word it’ll display the full word, I'm not sure how to go about pushing the corresponding letters into the correct index of the word as they are guessed...</p></li>
  <li><p>It would be nice if the onKeyUp events would only register letters and do nothing when any other character is pressed. </p></li>
  <li><p>I can’t seem to find a way to make sure that you can only guess each letter one time. For example, if the word is ‘apple’ and I press the Z key, the letter Z will show up in my Letters Already Guessed section of my page, but if I press Z again, it will show up a second time. I’d like it so that after the first time you press a key it doesn’t register the duplicate and either does nothing or alerts you that you’ve already used that letter.</p></li>
  </ol>
  
  <p>Here’s my code below, I know there are some things that I probably could accomplish the same thing with by using fewer lines of code but I’m still learning, basically started with HTML and CSS about 4 weeks ago. And sorry for the long-ish post, I just wanted to make sure I put all the details out there.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> // This is our array of words for the game
          var words = ['grey', 'school', 'warrior', 'thunder', 'real', 'shark', 'butter', 'tomato', 'potato', 'university',
            'popcorn', 'progress', 'elephant', 'phone', 'artist', 'handkerchief', 'chemistry', 'picture', 'camera', 'alternate',
            'sandwich', 'water', 'traitor', 'america', 'basketball', 'personal', 'homerun', 'apple', 'banana', 'monster',
            'lightning', 'microphone', 'door', 'monitor', 'television', 'prisoner', 'detective', 'breaking', 'solution',
            'fantasy', 'ocean', 'president', 'patio', 'titanic', 'candy', 'hamburger', 'currency', 'copper', 'buffalo',
            'cowboy'];
  
          console
          var currentWord = words[Math.floor(Math.random() * words.length)].toUpperCase();
  
      // This variable holds the number of guesses left
          var guessesLeft = 6;
          document.getElementById("guesses-left").innerHTML = guessesLeft;
  
          // This variable will count the number of times we won
          var wins = 0;
          document.getElementById("wins").innerHTML = wins;
  
          var resetLettersGuessed = ""
  
          // This is an empty array that we will push our blanks to
          var progressWord = [];
  
          // This is an array that we will push the letters from the current word to
          // for comparison of whether the player's guess is correct or not
          var mysteryWord = [];
  
          // This will store our random generated word so we can see the answer in the console 
          // for our reference
          for (i = 0; i &lt; currentWord.length; i++) {}
  
          console.log(currentWord.toUpperCase());
  
          // This is the code that will push out blank spaces for the letters of the current 
          // word so the player can see the word and begin to guess letters
          for (var i = 0; i &lt; currentWord.length; i++) {
            progressWord.push("__");
            progressWord.toString()
            document.getElementById("word-guess").innerHTML = progressWord.join(" ");
          }
  
          console.log(progressWord);
  
          // This is the code that will push out the letters of the current word
          // to the new variable fo comparison
          for (var i = 0; i &lt; currentWord.length; i++) {
            mysteryWord.push(currentWord.charAt(i));
            mysteryWord.toString(i)
          }
  
          console.log(mysteryWord)
  
  
  
          // These are the key events used to play and to document the letters already used and/or 
          // letters in the answers
          document.onkeyup = function(onKeyUp) {
            letter = onKeyUp.keyCode;
            lettersGuessed = String.fromCharCode(letter);
            console.log(lettersGuessed);
  
            // This will alert correct and compare the letter guessed with the current word
            if (lettersGuessed === mysteryWord[0] || lettersGuessed === mysteryWord[1] ||
              lettersGuessed === mysteryWord[2] || lettersGuessed === mysteryWord[3] ||
              lettersGuessed === mysteryWord[4] || lettersGuessed === mysteryWord[5] ||
              lettersGuessed === mysteryWord[6] || lettersGuessed === mysteryWord[7] ||
              lettersGuessed === mysteryWord[8] || lettersGuessed === mysteryWord[9] ||
              lettersGuessed === mysteryWord[10] || lettersGuessed === mysteryWord[11] ||
              lettersGuessed === mysteryWord[12] || lettersGuessed === mysteryWord[13] ||
              lettersGuessed === mysteryWord[14] || lettersGuessed === mysteryWord[15] ||
              lettersGuessed === mysteryWord[16] || lettersGuessed === mysteryWord[17] ||
              lettersGuessed === mysteryWord[18] || lettersGuessed === mysteryWord[19] ||
              lettersGuessed === mysteryWord[20]) {
              // alert("CORRECT!");
  
              // replace progress Word underscore with letter pressed
              document.getElementById("word-guess").innerHTML = mysteryWord.join(" ");
            } else {
              // alert("WRONG!");
              document.getElementById("letters-guessed").innerHTML += lettersGuessed + " ";
  
              // subtract a point from guesses left
              guessesLeft--;
              document.getElementById("guesses-left").innerHTML = guessesLeft;
            }
  
            // This code will tell the user the game is over along with a message about
            // their win streak, then it will reset the game while quickly showing 
            // what the word was
            if (guessesLeft === 0) {
              alert("Game Over! You finished with a streak of " + wins + " wins! The word was " + currentWord);
              location.reload();
              document.getElementById("word-guess").innerHTML = currentWord;
            }
  
            // this is the code that alerts you when you've won the game, then it will reset 
            // the current word to begin another round
            if (currentWord === progressWord) {
              var phrases = ['Yup! Onto the next one!', 'Leggo!','You like the Air Jordan of Hangman!', 'Dont hurt em!', 'Turn up!',
              'Go and brush ya shoulders off!', 'In the zone!']
              var nextRound = phrases[Math.floor(Math.random() * phrases.length)];
              alert(nextRound);
  
  
              // reset guesses left
              guessesLeft = 6;
              document.getElementById("guesses-left").innerHTML = guessesLeft;
  
              // reset letters guessed
              document.getElementById("letters-guessed").innerHTML = resetLettersGuessed;
  
              // This code generates a new word to guess and then pushes out the blanks again
              currentWord = words[Math.floor(Math.random() * words.length)].toUpperCase();
  
              progressWord = [];
              for (var i = 0; i &lt; currentWord.length; i++) {
                progressWord.push("__");
                progressWord.toString()
                document.getElementById("word-guess").innerHTML = progressWord.join(" ");
              }
  
              mysteryWord = []
              for (var i = 0; i &lt; currentWord.length; i++) {
                mysteryWord.push(currentWord.charAt(i));
                mysteryWord.toString(i)
              }
              console.log(currentWord);
              console.log(progressWord);
              console.log(mysteryWord);
  
              // Add to the win total
              wins++;
              document.getElementById("wins").innerHTML = wins;
            }
          }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      padding: 0;
      background-color: ;
  }
  
  header {
      margin-bottom: 2.5%;
      border-bottom: 0px solid black;
      background-image: url("../images/hangman-header.jpg");
      background-size: 100% 125px;
      height: 125px;
  }
  
  footer {
      background-image: url("../images/hangman-footer.jpg");
      bottom: 0;
      left: 0;
      height: 7%;
      width: 100%;
      color: black;
      font-weight: 500;
      text-align: center;
      position: fixed;
      line-height: 3em;
      border-top: 3px solid lightgray;
  }
  
  hr {
      width: 90%;
      margin-bottom: 3%;
      margin-top: 0%;
  }
  
  h1 { 
      margin-top: -2%;
      margin-bottom: 0%;
      text-align: center;
      font-size: 28px;
      line-height: 50px;
   }
  
  h2 {
      margin-bottom: 0%, 0%, 0%, 20%;
      font-size: 29px;
      text-align: center;
  }
  
  h3 {
      padding: 0%;
      margin-top: 0%;
      margin-bottom: 2%;
      background-color: #FFFFFF;
      border: 0px solid black;
      font-size: 18px;
  }
  
  ul {
      padding: 0;
      margin-bottom: 15%;
      margin-top: 10%;
      word-break: break-all;
  }
  
  li {
      padding: 1%;
      margin-bottom: -3%;
      margin-top: -7.5%;
      list-style: none;
      font-size: 20px;
      text-align: center;
      border: 0px solid black;
      font-weight: 600;
      color: #9ca6ba;
      background-color: white;
  }
  
  .main-section {
          border: 0px solid black;
          height: 55%;
          margin-bottom: 0%;
          margin-top: -3%;
          padding-left: 5%;
          padding-right: 5%;
  }
  
  .top-label {
      border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Hangman!&lt;/title&gt;
  
  &lt;!-- Latest compiled and minified CSS --&gt;
  
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
  &lt;!-- Optional theme --&gt;
  
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
  
  &lt;!-- Modified CSS file --&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="assets/css/hangman-style.css"&gt;
  
  &lt;!-- CSS for Google Fonts --&gt;
  
  &lt;link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"&gt;
  
  &lt;!-- Javascript is enabled --&gt;
  
      &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;header&gt; &lt;/header&gt;
  
  &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-4 col-md-offset-4 top-label"&gt;
          &lt;br&gt;
              &lt;h1&gt;Press any key to get started!&lt;/h1&gt;
                  &lt;hr&gt;    
  
                      &lt;ul&gt;
                          &lt;li&gt;Total Wins: &lt;/li&gt;
                          &lt;br&gt;
                          &lt;center&gt;&lt;h3&gt;&lt;span id="wins"&gt;&lt;/span&gt;&lt;/h3&gt;&lt;/center&gt;
                          &lt;br&gt;
                          &lt;br&gt;
                          &lt;li&gt;# of Guesses Remaining: &lt;/li&gt;       
                          &lt;br&gt;
                          &lt;center&gt;&lt;h3&gt;&lt;span id="guesses-left"&gt;&lt;/span&gt;&lt;/h3&gt;&lt;/center&gt;
                          &lt;br&gt;
                          &lt;br&gt;
                          &lt;li&gt;Letters Already Guessed: &lt;/li&gt;
                          &lt;br&gt;
                          &lt;center&gt;&lt;h3&gt;&lt;span id="letters-guessed"&gt;&lt;/span&gt;&lt;/h3&gt;&lt;/center&gt;
                          &lt;br&gt;
                          &lt;br&gt;
                          &lt;li&gt;Current Word: &lt;/li&gt;
                          &lt;center&gt;
                          &lt;br&gt;
                          &lt;h3&gt;&lt;span id="word-guess"&gt;&lt;/span&gt;&lt;/h3&gt;&lt;/center&gt;
                          &lt;/ul&gt;           
          &lt;/div&gt;      
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;footer&gt;Copyright 2017&lt;/footer&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript" src="assets/javascript/game.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>