The question is:
Write code in YOUR CODE HERE that logs the current and previous values of the data-color attribute on the #cro-headline element each time that the attribute changes. Your log statement should look something like this:
console.log('Current color: ' + currentColor + ' | Previous Color: ' + previousColor);
My answer so far:
var oldFunction = window.changeHeadlineColor;
window.changeHeadlineColor = function(croHeadline) {
oldFunction(croHeadline);
var currentElement = document.querySelector('#cro-headline');
var currentColor = currentElement.dataset.color;
var previousElement = currentElement.previousElementSibling;
var previousColor = previousElement.dataset.color;
console.log('Current color: ' + currentColor + ' | Previous Color: ' + previousColor);
}
I'm just not entirely sure how to log the previous value of the data-color attribute. Any help would be greatly appreciated!
HTML:
<!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>
////////////////////
/* YOUR CODE HERE */
////////////////////
</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>
I've added just a previousColor = currentColor.
<!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 previousColor;
var oldFunction = window.changeHeadlineColor;
window.changeHeadlineColor = function(croHeadline) {
oldFunction(croHeadline);
var currentElement = document.querySelector('#cro-headline');
var currentColor = currentElement.dataset.color;
console.log('Current color: ' + currentColor + ' | Previous Color: ' + previousColor);
previousColor = currentColor;
}
</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(1000));
</script>
</body>
</html>