Javascript Variables to Multiple HTML Background Colors

Question

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, specify 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.

Robusto · Accepted Answer · 2010-11-08 00:41:00Z

2

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.

answered Nov 8, 2010 at 0:41

Robusto

32k8 gold badges59 silver badges79 bronze badges

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

Collectives™ on Stack Overflow

Javascript Variables to Multiple HTML Background Colors

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related