Random color each 5 seconds-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

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