Random color each 5 seconds

Question

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);

Welcome to Stack Overflow! Relevant code and error messages need to be included in your question *as text*, not as pictures of text. Just linking to screen shots makes it more difficult for people to help you. To learn more about this community and how we can help you, please start with the [tour] and read [ask] and its linked resources. — David, May 17 '22 at 14:42
Additionally... Please see [Why is “Can someone help me?” not an actual question?](https://meta.stackoverflow.com/q/284236/328193) In what way is your code not working as expected? Please elaborate on the specific problem you are observing and what debugging you have done. — David, May 17 '22 at 14:46
The problem is that you're selecting "all H3" tags, making `h3` an array, not a single element. You need to wrap your code inside the interval into a loop for the array and have it change each element inside there, or select a single element in the first place. — icecub, May 17 '22 at 14:54

score 1 · Accepted Answer · answered May 17 '22 at 14:56

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);

score 0 · Answer 2 · answered May 17 '22 at 14:58

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>

Subham Subhasis Patra · Answer 3 · 2022-05-17T15:14:31.287

<!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>

Random color each 5 seconds

3 Answers3