#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    9
    Rep Power
    0

    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
  2. #2
  3. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    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.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    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.

    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).
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    9
    Rep 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.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    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";
    Spreading knowledge, one newbie at a time.

    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).
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    9
    Rep Power
    0
    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?
  12. #7
  13. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    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.
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    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".

    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-HTM...#ID-1006298752
    http://www.w3.org/TR/DOM-Level-2-Cor...tml#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).
    Spreading knowledge, one newbie at a time.

    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).

IMN logo majestic logo threadwatch logo seochat tools logo