Javascript Variables to Multiple HTML Background Colors

and thanks in advance for any and all help provided. I've checked around on the internet and haven't found anyone else with my specific problem.

I am running Wordpress on a website and have two divs that I would like to enable the user to change the color of using Javascript/HTML. The background color can either be specified in CSS, or in HTML. I'm kind of a newbie at Javascript, but I was hoping to be able to create two Javascript variables, for example:

var headercolor="3366FF";
var maincolor="FFFFFF";

and then in HTML, for example, spe开发者_如何学Pythoncify the background color as the variable.

<div id="header" style="background-color:javascript:document.write(headercolor);">
CONTENT HERE
</div>
<div id="main" style="background-color:javascript:document.write(maincolor);">
CONTENT HERE
</div>

Since the Javascript variables are given default values, they would display those when the page was loaded for the first time, but when a user clicks a link, the colors would change.

<a href="#" onclick=javascript:var maincolor="3366FF";>Click here to get a blue main background!</a>

Bascially, I'm wondering if any of this is possible. If so, how can I do it? If not, thanks for taking the time to read this post, and please let me know that it can't be done, or can be done another way.

Don't use document.write() in this context, if ever.

You're actually asking if you can bind elements to variables, and that's just not going to work in Javascript and the DOM. You'll have to create a function to do it, or use a function literal, or just a Javascript statement, as below (you don't need the javascript: prefix):

onclick="document.getElementById('main').style.backgroundColor='#3366FF'"

should do it for you.