I have the code for the random color that i took it from someone from here but i does not work when I try to put it in the h3 tag can anyone help me?
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);
Your issue here is that your h3 variable refers to an HTMLCollection, not a single Element. For this reason, you need to loop over those elements, rather than trying to set the style directly on h3, like so:
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>If you want them to all be the same color, you would just move the generateRandomColor() outside the loop, like this:
window.setInterval(function(){
var color = generateRandomColor();
Array.from(h3).forEach(function (elem) {
elem.style.color = color;
})
}, 5000);
The problem is that you are trying to get all h3 on the page which returns a list of them. If you only want to change this for a single element then just change getElementsByTagName to querySelector like this.
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>If you want this to works for all h3 elements you could do it like this instead.
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>