Tengo el código para el color aleatorio que lo tomé de alguien de aquí, pero no funciona cuando trato de ponerlo en la etiqueta h3, ¿alguien puede ayudarme?
function generateRandomColor() { var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16); if(randomColor.length != 7) { randomColor = generateRandomColor(); } return randomColor; // The random color will be freshly served } var h3 = document.getElementsByTagName("h3"); window.setInterval(function(){ h3.style.color = generateRandomColor() }, 5000);Su problema aquí es que su variable h3 se refiere a unaHTMLCollection , no a un solo elemento. Por esta razón, debe recorrer esos elementos , en lugar de intentar establecer el estilo directamente en h3 , así:
function generateRandomColor() { var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16); if(randomColor.length != 7) { randomColor = generateRandomColor(); } return randomColor; // The random color will be freshly served } var h3 = document.getElementsByTagName("h3"); window.setInterval(function(){ Array.from(h3).forEach(function (elem) { elem.style.color = generateRandomColor(); }) }, 5000); <h3>Test</h3> <h3>Test2</h3> <h3>Test3</h3> Si desea que todos sean del mismo color, simplemente mueva el generateRandomColor() fuera del bucle, así:
window.setInterval(function(){ var color = generateRandomColor(); Array.from(h3).forEach(function (elem) { elem.style.color = color; }) }, 5000);El problema es que está tratando de obtener todos los h3 en la página que devuelve una lista de ellos. Si solo desea cambiar esto para un solo elemento, simplemente cambie getElementsByTagName a querySelector de esta manera.
function generateRandomColor() { var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16); if(randomColor.length != 7) { randomColor = generateRandomColor(); } return randomColor; // The random color will be freshly served } var h3 = document.querySelector("h3"); window.setInterval(function(){ h3.style.color = generateRandomColor() }, 5000); <h3>Header!</h3> Si desea que esto funcione para todos los elementos h3 , puede hacerlo así.
function generateRandomColor() { var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16); if(randomColor.length != 7) { randomColor = generateRandomColor(); } return randomColor; // The random color will be freshly served } var headers = document.querySelectorAll("h3"); window.setInterval(function(){ for(var h3 of headers) { h3.style.color = generateRandomColor() } }, 5000); <h3>Header 1!</h3> <h3>Header 2!</h3> <h3>Header 3!</h3> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h3 { font-size : 45px; } </style> </head> <body> <h3>Hi Good to see that </h3> <script> function generateRandomColor() { var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16); if (randomColor.length != 7) { randomColor = generateRandomColor(); } return randomColor; // The random color will be freshly served } var h3 = document.getElementsByTagName("h3"); window.setInterval(function () { <!-- setting the random color --> h3[0].style.color = generateRandomColor(); }, 5000); </script> </body> </html>