Estoy tratando de reemplazar el texto dentro de un tiempo de espera mientras solo manipulo la parte del HTML a continuación dentro de "SU CÓDIGO AQUÍ".
Un ".innerHTML" debería funcionar, pero me encuentro con que el elemento es nulo.
¡Cualquier ayuda sería muy apreciada!
Este fue mi intento completo:
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>Al "piratear" la función que se ejecuta después del tiempo de espera, esto se puede lograr.
<!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>Su guión no puede encontrar el título antes de que exista
Puede ocultar el título y mostrarlo usando setTimeout
Además, no es necesario prefijar todas las funciones con ventana y mover todo lo que desea que suceda en la carga de la página a la misma función
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>