How to make the div box randomly change color every 1000 millisecond with HTML Javascript?

Question

I've been trying to figure out how to make the div box randomly change color every 1000 millisecond. This is my attempt of function changeColor JavaScript file:

myInterval = setInterval(changeColor, 1000);
var box = document.getElementById("box");

function changeColor() {
  var randomColor = Math.floor(Math.random() * 16777215).toString(16);

  box.style.backgroundColor = "#" + randomColor;

  //let x = document.getElementById('contents');
  //x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}

<div id="box">This is some text in a div element.</div>

You have to convert generated decimal number into hexa decimal value. — Reporter, Jan 20 '22 at 14:20
It is converted to hexadecimal value , since toString(16) is used. Unless some other style is set on that div, the above code should change the background color as coded. which browser are you using? — Anand Sowmithiran, Jan 20 '22 at 14:26
Does [this](https://stackoverflow.com/questions/1484506/random-color-generator) work for you? — vee, Jan 20 '22 at 14:27
This code work for me. I use chrome. I write your code by my self. — Navid, Jan 20 '22 at 14:38
The only possible issue is that your javascript code is placed _before_ the `
`. That and hex color need to be padded to 6 digits (see https://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color) — Salman A, Jan 20 '22 at 19:10

score 0 · Answer 1 · answered Jan 20 '22 at 14:31

0

Like this way

var div = document.querySelector(".test");

setInterval(() => {
  div.style.background = `#${getColor()}`;
}, 1000)

function getColor() {    
  return Math.floor(Math.random()*16777215).toString(16);
}

answered Jan 20 '22 at 14:31

Cagkan Mert Oztas

156
1
11

How will changing the syntax or replacing getElementById with querySelectorAll solve the problem? – Salman A Jan 20 '22 at 19:08
It's not about selector syntax. For some reasons backgroundColor is not accept Hex color codes. You can use RGB colors or you can use background instead of backgroundColor. And already, when you use this function and inspect element it's writing color to style attribute as rgb color. One of the options you can convert hex color to rgb. – Cagkan Mert Oztas Jan 27 '22 at 08:15

score -1 · Answer 2 · answered Jan 20 '22 at 14:51

I have attached the javascript function to change the colour of the randomly for every 1000 milliseconds.

<!DOCTYPE html>
<html>
<head>
  <title>Change bg color every 1 seconds</title>
</head>
<body>
<div id="box">This is some text in a div element.</div>
<script>
setInterval(
function () {
  var randomColor = Math.floor(Math.random()*16777215).toString(16);
  document.getElementById("box").style.backgroundColor = "#"+randomColor;
},1000);
</script>
</body>
</html>

You've just written the code from the question in a slightly different way without changing any functionality. — Sean, Jan 20 '22 at 15:17

How to make the div box randomly change color every 1000 millisecond with HTML Javascript?

2 Answers2