How To Replace Text Inside of a Timeout

July 4, 2022

I’m trying to replace text inside of a timeout while only manipulating the part of the below HTML inside of "YOUR CODE HERE".

A ".innerHTML" should do the trick but I’m running into the element being null.

Any help would be greatly appreciated!

This was my full attempt:

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(() => {
    var colorKey = (randomString.length < 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(() => {
  myDiv.insertAdjacentHTML('beforebegin', '<h1 id="cro-headline" data-color="red">Cro Metrics</h1>');
  var croHeadline = document.querySelector('#cro-headline');
  changeHeadlineColor(croHeadline);
}, getRandomNumber(5000));

[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;
}

<div id="myDiv">OMG Click me!</div>

>Solution :

By "hacking" the function that runs after the timeout, this can be achieved.

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    [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;
    }
  </style>
  <script>
    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(() => {
        var colorKey = (randomString.length < 4) ? 0 : parseInt(randomString.charAt(0));
        croHeadline.setAttribute('data-color', colors[colorKey]);
        changeHeadlineColor(croHeadline);
      }, random);
    };
  </script>
  <script>
  var old = window.changeHeadlineColor;
    window.changeHeadlineColor = function(croHeadline) {
      old(croHeadline);
      const newCroHeadline = document.querySelector('#cro-headline');
      newCroHeadline.innerHTML = "My new text!";

    }

  </script>
</head>

<body>
  <div id="myDiv">OMG Click me!</div>
  <script>
    document.querySelector('#myDiv').addEventListener('click', myHandler);

    setTimeout(() => {
      myDiv.insertAdjacentHTML('beforebegin', '<h1 id="cro-headline" data-color="red">Cro Metrics</h1>');
      var croHeadline = document.querySelector('#cro-headline');
      changeHeadlineColor(croHeadline);
    }, getRandomNumber(5000));
  </script>
</body>

</html>