Generate random hexadecimal to change color in html

Question

I have a web page that has a div element with a colored background.

I want the color to change each time someone loads the page.

I found this snippet of code online which apparently generates a random hexadecimal number:

'#'+Math.floor(Math.random()*16777215).toString(16);

I'm new to JavaScript and so I'm trying to piece together how I implement this.

I assume that I assign a variable to the randomly generated hexadecimal:

bandColor = '#'+Math.floor(Math.random()*16777215).toString(16);

Now I'm not sure whether I use this variabile (bandColor) in my stylesheet or my html.

If it's the html, I'm guessing I do something like this in the JavaScript:

$("#band").html(bandColor);

And then in the html:

<div id="band">

Would appreciate anyone who can point out what I have right / wrong!

APerson · Accepted Answer · 2018-02-07 03:46:00Z

2

Try the style attribute of the element, so:

$("#band").css("background-color", bandColour);

Side note: sometimes your code will generate a five-digit or fewer hex string, like #9eb8d. You can fix this by left-padding with zeroes:

bandColour = ("000000" + bandColour).slice(-6);

which you would put before the statement where you set the background color.

answered Feb 7, 2018 at 3:46

APerson

8,4588 gold badges39 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

HarisH Sharma · Accepted Answer · 2018-02-07 03:52:58Z

1

Pure javascript solution can be:

document.getElementById("band").style.background = "blue";

And with random color:

document.getElementById("band").style.background = '#'+(Math.random()*0xFFFFFF<<0).toString(16);

answered Feb 7, 2018 at 3:52

HarisH Sharma

1,2853 gold badges14 silver badges46 bronze badges

2 Comments

APerson Over a year ago

This answer sometimes generates invalid 5-digit color strings.

HarisH Sharma Over a year ago

I used it but always generates valid one, If something you know better, welcome for edit,

mustachioed · Accepted Answer · 2018-02-07 06:07:23Z

1

JavaScript in external or embed style-sheet for CSS.

<!doctype html>
<html>
<head>
<style>
#band{
  width: 100%;
  height: 500px;
  background-color: #123456;
}
</style>
</head>
<body>
<div id="band"><div>
<script>
var bandColour = document.getElementById('band');
bandColour.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
</script>
</body>
</html>

edited Feb 7, 2018 at 6:07

mustachioed

5333 silver badges18 bronze badges

answered Feb 7, 2018 at 4:04

Joe

261 bronze badge

Collectives™ on Stack Overflow

Generate random hexadecimal to change color in html

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related