La pregunta es:
Escriba código en TU CÓDIGO AQUÍ que registre los valores actuales y anteriores del atributo de color de datos en el elemento #cro-headline cada vez que cambie el atributo. Su declaración de registro debería verse así: console.log('Current color: ' + currentColor + ' | Previous Color: ' + previousColor);
Mi respuesta hasta ahora:
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); }Simplemente no estoy del todo seguro de cómo registrar el valor anterior del atributo de color de datos. ¡Cualquier ayuda sería muy apreciada!
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>Agregué solo un 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>