Use JS to change background colour

Question

I am an absolute beginner, and thought that I'd see if i could copy this seemingly basic project (http://jenniferdewalt.com/random_background.html). Rather than just copy the code, I want to figure out why I can't get it to work. I really have no idea how JS interacts with HTML. Here's what i've got:

HTML:

<link type="text/css" rel="stylesheet" href="../../CSS/randomcolor/randomcolour.css" /> <link type="text/javascript" src="../../JS/Random Colour/randomcolour.js"> <script type="text/javascript" src="../../JS/Random Colour/randomcolour.js"></script> </head> <body> <a href="javascript:void(0)" onclick="randomColor()";> <div .class="button" id="button"> <h2></h2> </div> </a>

JS:

function randomColor() { return '#' + Math.random().toString(16).slice(2, 8); }; var backgroundColor = randomColor()

This is all probably a million miles off the mark, so if anyone can point me to a resource that will help me out at all, it'd be much appreciated. It's so frustrating not being able to figure this out!

When you click the link, you call randomColor(), but you don't do anything with the return value. — Joel Cornett
– Joel Cornett, Commented Dec 18, 2013 at 1:22

Sterling Archer · Accepted Answer · 2013-12-18 01:23:03Z

Use this function to generate a random color!

function get_random_color() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.round(Math.random() * 15)]; } return color; }

And in your html, the period before class is not needed.

Then, set the body of the page with:

document.body.style.backgroundColor = get_random_color(); //or stick with randomColor();

It's also better practice not to use inline javascript, try setting the onclick event like this (removing it from the html)

var button = document.getElementById("button"); button.onclick = function() { //set body style here }

Oh, one more thing: you're trying to use a link tag to reference a javascript file -- this will not work. That's for CSS!

Thanks for your help. so now i have:</head> <body> <div class="button" id="button"> <h2>Press Me!</h2> </div> </body> for the html
function get_random_color() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.round(Math.random() * 15)]; } return color; } var button = document.getElementById("button"); button.onclick = function() { document.body.style.backgroundColor = get_random_color(); }Still not working, what do I need to do?
Depends, what does not working mean? Error messages? Debug statements?
When i preview the html page and click the button to run the function, nothing happens to the background. Do you know of any decent sites to pick up stuff like this, as I feel embarrassed asking things that should be obvious.
Just follow tutorials, google search keywords of your questions. Google is very helpful and SEO yields a lot of good Stack questions

Thayne · Accepted Answer · 2013-12-18 01:21:49Z

You are only storing the background color in a temporary variable, you need to store it into the backgroundColor css property of the body

so you need

document.body.style.backgroundColor = randomColor()

where you want to change the background color.

For examlple you could put this directly in the onClick handler, or call function that does this.

StackSlave · Accepted Answer · 2013-12-18 01:24:34Z

1

The formula is Element.style.backgroundColor = '#000000;'

edited Dec 18, 2013 at 1:24

answered Dec 18, 2013 at 1:19

StackSlave

10.6k2 gold badges20 silver badges35 bronze badges

Comments

Muhammad Umer · Accepted Answer · 2013-12-18 01:31:15Z

The best way to do this is this.... very easy.

a. first define a function that return random values so less writing.

b. input those into rgba ...

c. you have what you want.

function rand(x){return Math.round(Math.random()*x);} document.body.style.backgroundColor='rgba('+rand(255)+','+rand(255)+','+rand(255)+','+rand(10)/10+')';

Collectives™ on Stack Overflow

Use JS to change background colour

4 Answers 4

5 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Linked

Related