title: How do I change the style of a character in an array?
body: <p>I have a <code>div#effect</code> in my HTML which of the text inside is written from the JavaScript I've put here,</p>
  <p>I want to change the color of character &quot;D&quot; displayed in the div to be another color, I can refer to that character, console.log it or even alert it, but as soon as I want to set the <code>style.color</code> of it to say red, an undefined err pops,</p>
  <p>how can I change the color of that specific character to another color?</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>let x = 0;
  let textEffect = "Hi, \n I'm Dorothy, \n\ have a great day!".split('');
  let container = document.getElementById("effect");
  
  function animate() {
      if(x &lt; textEffect.length){
          container.innerHTML += textEffect[x];
          x++;
          setTimeout(animate, 80);
      }  // here is the error : document.getElementById('effect').innerHTML.charAt(10).style.color = "red"
  }
  animate();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#effect {
    font-size: 2rem;
    font-weight: bold;
    line-height: 2rem;
    font-family: "Archivo Black", sans-serif;
    color: #e2e2e2;
    text-shadow: 1px 1px 10px #333333;
    height: 220px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="effect" style="white-space: pre-line;"&gt;&lt;/div&gt;
  
  &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;</code></pre>
  </div>
  </div>
  </p>