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>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>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>