title: How To Replace Text Inside of a Timeout
body: <p>I'm trying to replace text inside of a timeout while only manipulating the part of the below HTML inside of &quot;YOUR CODE HERE&quot;.</p>
  <p>A &quot;.innerHTML&quot; should do the trick but I'm running into the element being null.</p>
  <p>Any help would be greatly appreciated!</p>
  <p>This was my full attempt:</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>window.myHandler = function() {
    console.log('Click!');
  };
  
  window.getRandomNumber = function(max) {
    return Math.floor(Math.random() * max)
  }
  
  var colors = ['red', 'blue', 'green', 'orange', 'purple'];
  window.changeHeadlineColor = function(croHeadline) {
    var random = getRandomNumber(5000);
    var randomString = random.toString();
    setTimeout(() =&gt; {
      var colorKey = (randomString.length &lt; 4) ? 0 : parseInt(randomString.charAt(0));
      croHeadline.setAttribute('data-color', colors[colorKey]);
      changeHeadlineColor(croHeadline);
    }, random);
  };
  
      ////////////////////
      /* YOUR CODE HERE */
      ////////////////////
  
  document.querySelector('#myDiv').addEventListener('click', myHandler);
  
  setTimeout(() =&gt; {
    myDiv.insertAdjacentHTML('beforebegin', '&lt;h1 id="cro-headline" data-color="red"&gt;Cro Metrics&lt;/h1&gt;');
    var croHeadline = document.querySelector('#cro-headline');
    changeHeadlineColor(croHeadline);
  }, getRandomNumber(5000));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>[data-color="red"] {
    color: red;
  }
  
  [data-color="blue"] {
    color: blue;
  }
  
  [data-color="green"] {
    color: green;
  }
  
  [data-color="orange"] {
    color: orange;
  }
  
  [data-color="purple"] {
    color: purple;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="myDiv"&gt;OMG Click me!&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>