How To Replace Text Inside of a Timeout-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

Your script cannot find the headline before it exists

You can hide the headline and show it using the setTimeout

Also no need to prefix all functions with window and move everything you want to happen on page load into the same function

let tId1, tId2;
const myHandler = () => {
  console.log('Click!');
};

const getRandomNumber = max => Math.floor(Math.random() * max);

const colors = ['red', 'blue', 'green', 'orange', 'purple'];
const changeHeadlineColor =  croHeadline => {
  let random = getRandomNumber(5000);
  let randomString = random.toString();
  tId1 = setTimeout(() => {
    let colorKey = (randomString.length < 4) ? 0 : parseInt(randomString.charAt(0));
    croHeadline.setAttribute('data-color', colors[colorKey]);
    changeHeadlineColor(croHeadline);
  }, random);
};


document.addEventListener("DOMContentLoaded", () => { // wait until DOM has loaded
  const newCroHeadline = document.querySelector('#cro-headline');
  newCroHeadline.innerHTML = "My new text!";
  document.querySelector('#myDiv').addEventListener('click', myHandler);
  tId2 = setTimeout(() => {
    var croHeadline = document.querySelector('#cro-headline');
    changeHeadlineColor(croHeadline);
    croHeadline.hidden = false;
  }, 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;
}

<h1 id="cro-headline" data-color="red" hidden>Cro Metrics</h1>
<div id="myDiv">OMG Click me!</div>