Can't change background color

Dev Shed Forums Sponsor:

January 13th, 2013, 05:47 PM

Inordinate

Registered User

Join Date: Jan 2013

Posts: 9

Time spent in forums: 3 h 10 m 4 sec
Reputation Power: 0

Other - Can't change background color

I'm trying to make a function which will change the background color of a page from a dropdown menu.
I'm not sure why it doesn't work; any help or tips would be great.

This is the function. I don't know where or what's wrong with it.

PHP Code:


		
			
<script type = "text/javascript">

        function bgChanger()

        {

            defaultcolor = window.document.bgColor;

            backcolorvalue = window.document.bgchanger.bg.selectedIndex;

            backcolor = window.document.bgchanger.bg[backcolorvalue].value;

            if (backcolorvalue == 0)

            {

                window.document.bgcolor = '#0040FF';

            }

            else if (backcolorvalue == 1)

            {

                window.document.bgcolor = '#CC00FF';

            }

            else if (backcolorvalue == 2)

            {

                window.document.bgcolor = '#CCFFCC';

            }

            else if (backcolorvalue == 3)

            {

                window.document.bgcolor = '#FFFF33';

            }

            else if (backcolorvalue == 4)

            {

                window.document.bgcolor = defaultcolor;

            }

        }

        </script>

Here's the form.

PHP Code:


		
			
<form name = "bgchanger">

<select name = "bg" onChange = "bgChanger()">

<option value = "blue">Blue</option>

<option value = "red">Red</option>

<option value = "green">Green</option>

<option value = "yellow">Yellow</option>

<option value = "default">Default</option>

</select>

</form>

January 13th, 2013, 06:17 PM

Jacques1

pollyanna

Join Date: Jul 2012

Location: Germany

Posts: 1,881

Time spent in forums: 1 Month 2 Weeks 2 Days 8 h 22 m
Reputation Power: 813

Hi,

it's

Code:

document.bgColor

with a big "C" (like you wrote in the first few lines of the function). JavaScript is case sensitive.

January 13th, 2013, 07:28 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192

Welcome to DevShed Forums, Inordinate.

Jacques1, you're not going to mention that it's deprecated and the CSS background-color property should be used instead?

In JavaScript, hyphens aren't allowed in variable names, so "camel-case" is used instead, therefore, "background-color" becomes "backgroundColor":

Code:

document.body.style.backgroundColor

Comments on this post

Jacques1 agrees: You're absolutely right about the deprecation. To be honest, I didn't know document.bgColor even
exists...

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

January 14th, 2013, 02:29 PM

Inordinate

Registered User

Join Date: Jan 2013

Posts: 9

Time spent in forums: 3 h 10 m 4 sec
Reputation Power: 0

Jacques1: Thank you very much. I probably wouldn't have been able to figure this out on my own.

Kravvitz: I don't know any CSS right now so I might just be sticking with what I'm using D:
Thanks for letting me know though.

January 14th, 2013, 03:29 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192

All right, consider this your first lesson.

The "background-color" property takes the same values as the old bgColor attribute (plus many more).

For example, you can set the background to blue with either of these:

Code:

document.body.style.backgroundColor = '#0000ff';
document.body.style.backgroundColor = 'blue';

Comments on this post

web_loone08 agrees: I like to use the DOM method; when I change the style of elements, because I think the above method
may be depreciated, in the future. I change the background color; like so:
document.getElementsByTagName("body")[0].style.backgroundColor = "#0000ff";

January 14th, 2013, 09:49 PM

Inordinate

Registered User

Join Date: Jan 2013

Posts: 9

Time spent in forums: 3 h 10 m 4 sec
Reputation Power: 0

Quote:

Originally Posted by Kravvitz

All right, consider this your first lesson.

The "background-color" property takes the same values as the old bgColor attribute (plus many more).

For example, you can set the background to blue with either of these:

Code:

document.body.style.backgroundColor = '#0000ff';
document.body.style.backgroundColor = 'blue';

So basically I should just replace bgColor with backgroundColor?

January 14th, 2013, 09:54 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 605

Time spent in forums: 1 Week 1 Day 16 h 34 m 55 sec
Reputation Power: 69

That would be the best coding practices; especially if your just learning JavaScript. That way you do not have to break bad coding habit, later on.

January 14th, 2013, 11:20 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192

Yes, replace "window.document.bgColor" with "document.body.style.backgroundColor". The "window.", in your original code, would only be necessary if you had a local variable named "document".

Quote:

Originally Posted by web_loone08

I like to use the DOM method; when I change the style of elements, because I think the above method
may be depreciated, in the future. I change the background color; like so:
document.getElementsByTagName("body")[0].style.backgroundColor = "#0000ff";

Yes, "document.body" is the old way, but I don't see it going away any time soon and it's so much shorter than using getElementsByTagName(). Both are part of the DOM2 standards.
http://www.w3.org/TR/DOM-Level-2-HT...l#ID-1006298752
http://www.w3.org/TR/DOM-Level-2-Co...html#i-Document

Comments on this post

web_loone08 agrees: I guess only time will tell, but usually syntax is easy; get's depreciated in later browser versions
(example: bgColor).

Other - Can't change background color

Developer Shed Advertisers and Affiliates