title: Replace array id in DOM from user input - Hangman Game JS
body: <p>I am making a hangman game for class and I have it mostly working so far, however I am unable to replace the user input if the char is correct, to the <code>_</code> space on the DOM.</p>
  <p>For example: <code>_ _ _ _ _</code> becomes <code>m _ l a _</code> as the user enters in the keys. Currently, I have it showing above, but would like it to replace the blanks. Also remove the <code>,</code>'s. How can I do that?</p>
  <p><a href="https://i.stack.imgur.com/51Zsp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/51Zsp.png" alt="enter image description here" /></a></p>
  <p>HTML:</p>
  <pre><code>&lt;!Doctype html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;title&gt;Disney Hangman Game&lt;/title&gt;
  
      &lt;link href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u&quot; crossorigin=&quot;anonymous&quot;&gt;
  
      &lt;script src=&quot;assets/js/hangman.js&quot;&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;jumbotron&quot; align=&quot;center&quot;&gt;
              &lt;h1&gt;Disney Hangman!&lt;/h1&gt;
              &lt;h2&gt;Guess the Disney movie below.&lt;/h2&gt;
  
              &lt;h3 id=&quot;userText&quot;&gt; &lt;/h3&gt;
              &lt;h3 id=&quot;display&quot;&gt; &lt;/h3&gt;
              &lt;h3&gt;Number of guesses left: &lt;span id=&quot;guesses&quot;&gt;&lt;/span&gt;&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>JS:</p>
  <pre><code>// Array of disney movies options //
  var options = [&quot;moana&quot;, &quot;lion king&quot;, &quot;finding nemo&quot;, &quot;aladdin&quot;, &quot;mulan&quot;, &quot;jungle book&quot;, &quot;frozen&quot;, &quot;tarzan&quot;, &quot;little mermaid&quot;, &quot;big hero 6&quot;];
  
  // Randomly select word from array //
  var randomPick = options[Math.floor(Math.random()*options.length)];
  
  // Split the word picked into letters array //
  var word = randomPick.split([]);
  console.log(word)
  
  // Array that records user input
  var userArray = [];
  
  // Counts length of the word that is split
  var length = word.length;
  console.log(length)
  
  // Display length of word in HTML
  window.onload = function() {
  for (var i = 0; i &lt; length; i++) {
      word[i] = &quot;_&quot;;
  }
  document.getElementById(&quot;display&quot;).innerHTML = word;
  }
  
  // Number of guesses
  var guesses = 15;
  
  // Store users inputs into userArray 
  document.onkeyup = function(input) {
      console.log(input)
      // var userInput = input.key;
      var userInput = (input.key).toLowerCase();
  
      //Record Countdown
              if (input.key) {
                  guesses--;
                  console.log(guesses)
  
                  userArray.push(userInput);
                  console.log(userArray)
  
                  if (guesses === 0) {
                      alert(&quot;Game Over!&quot;)
                  }
              }
  
              for (var i = 0; i &lt; length; i++) {
                  if (userInput === word[i]) {
                      userArray.push(userInput);
                      console.log(userArray)
                  }
              }
  
              if (userArray.length === word.length) {
                  alert(&quot;you win!&quot;)
              }
  
      // Display guess in guesses HTML
      document.getElementById(&quot;userText&quot;).innerHTML = userArray;
      // Display guesses left in HTML
      document.getElementById('guesses').innerHTML = guesses;
  }
  </code></pre>