javascript button to toggle document background colour

[pano pano]

hi all,
i need to create a button with javascript, that when i click on it, it will change the background color from white to black and backwards. I mean, every time i hit it, change the colo between white and black. Can you please show me the javascript for that?

[Rabbit]

What do you have so far?

[pano pano]

i have code to change between 2 background colors onclick. It is the background
color of the body of the webpage i want to change.
the code is this:

function changeBackgroundColor()
        {
            var backColor = new String();
 
            backColor = document.getElementById().style.backgroundColor;
 
                        if(backColor.toLowerCase()=='#e2e2e2' || backColor.toLowerCase()=='rgb(227, 227, 227)')
            {
                document.getElementById().style.backgroundColor = '#000000';
            }
            else
            {
                document.getElementById().style.backgroundColor = '#e2e2e2';
            }
        }

[pano pano]

Actually, the whole project is like this: I want to have a button(or whatever object in a web page, it's not important right now) that when i click on it, it will change both the header's bg image and the body's background color and also work backwards.

code so far:

Change body bg color:

function changeBackgroundColor()
        {
            var backColor = new String();
 
            backColor = document.getElementById("body").style.backgroundColor;
            if(backColor.toLowerCase("body")=='#e2e2e2' || backColor.toLowerCase("body")=='rgb(227, 227, 227)')
            {
                document.getElementById("body").style.backgroundColor = '#000000';
            }
            else
            {
                document.getElementById("body").style.backgroundColor = '#e2e2e2';
            }
        }
 

Change header image(this one changes image once, but i want to to work backwards too)

    function changeHeaderImage()
    {
        var imgPath = new String();
        imgPath = document.getElementById("header").style.backgroundImage;
 
        if(imgPath == "url(images/header_bg.jpg)" || imgPath == "")
        {
            document.getElementById("header").style.backgroundImage = "url(images/header_black.jpg)";
        }
        else
        {
            document.getElementById("header").style.backgroundImage = "url(images/header_bg.jpg)";
        }
    }
 

thanks for your help.

[Rabbit]

So basically you just want to call both functions? Why not do just that?

[pano pano]

Because they don't work. Until now, i only succeded in changing the header's bg image and it doesn't work backwards.

[Rabbit]

Well, first off, if you're trying to change the background color of the body, you use document.bgColor. As for the background image, I have no problem running that code. Other than your extraneous space between background and Image, it worked fine. But I assume that's a transposition error, otherwise it wouldn't run even the first time.

[pano pano]

What i meant saying backwards, is that i want to change the image (or color) every time i click on the button, not just twice. Sorry my english is not that good.

[Rabbit]

I know what you mean. It works for me.

[pano pano]

It didn't work for me for some reason, so i used a script that changes css class and it worked. I have this code above to change (toggle is the word i was looking for) the document bg color, but i can't get it to work.

function changeBackgroundColor()
        {
            var backColor = new String();
 
            backColor = document.backgroundColor;
            if(backColor.toLowerCase()=='#e2e2e2' || backColor.toLowerCase()=='rgb(227, 227, 227)')
            {
                document.backgroundColor = '#0f0f0f';
            }
            else
            {
                document.backgroundColor = '#e2e2e2';
            }
        }

[pano pano]

I changed the previous script to this

function changeBackgroundColor()
        {
            var backColor = new String();
            backColor = document.body.style.backgroundColor;
            if(backColor.toLowerCase()=='#0f0f0f' || backColor.toLowerCase()=='rgb(15, 15, 15)')
            {
                document.body.style.backgroundColor = '#ffffff';
            }
            else
            {
                document.body.style.backgroundColor = '#0f0f0f';
            }
        }

it worked. thanks

[omerbutt]

hi , a better approach is to use css selectors / classes to assign different color schemes and then you can switch between them using javascript


To add a class to an element:

document.getElementById("MyElement").className += " MyClass";
 

To remove a class from an element:

document.getElementById("MyElement").className = 
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/ , '' )
/* code wrapped for readability - above is all one statement */
 

To do that in an onclick event:

<script type="text/javascript">
    function changeClass()
    {
        // code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>
 

Better yet, use a framework (in this example jQuery) which allows you to do the following:

$j('#MyElement').addClass('MyClass');
 
$j('#MyElement').removeClass('MyClass');
 
$j('#MyElement').toggleClass('MyClass');
 

And also:

<script type="text/javascript">
    function changeClass()
    {
        // code examples from above
    }
 
    $j(':button:contains(My Button)').click(changeClass);
</script>
...
<button>My Button</button>
 

regards
Omer Aslam