title: Javascript not recognizing space in string as a character
body: <p>I am making a typewriter effect from an array of strings, some of which have spaces in them. In strings with spaces, the cursor pauses on the last letter of each word and then skips to the first letter of the next word, instead of advancing with the space. The character counter, however, advances as expected on the spaces.</p>
  
  <p>How can I fix this? I assume I need to do something with </p>
  
  <pre><code>&amp;nbsp; 
  </code></pre>
  
  <p>but I've tried everything I can think of. </p>
  
  <p>The cursor is just a right border on a blank div:</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>var words = ["fun", "exciting", "about not giving up", "being helpful", "being open"],
    el = document.getElementById('magic'),
    word_counter = 0,
    character_counter = 0;
  
  function updateText() {
    el.innerHTML = el.innerHTML + words[word_counter][character_counter++];
    if (character_counter == words[word_counter].length + 1) {
      word_counter++;
      character_counter = 0;
      el.innerHTML = '';
      if (word_counter == words.length) {
        word_counter = 0;
      }
    }
  }
  
  setInterval(updateText, 100);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#magic {
    color: #777;
    border-right: 1px solid #777;
    padding-right: 7px;
    display: inline;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="magic"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>