How to make a button that can change background color of a doucment?


Tags: javascript,html,css

Problem :

I would like to make a button that when it's clicked ,the background color of my webpage changes. I have tried already with Javascript & Css but no success! Here's my code:

<!DOCTYPE html>
<html>
    <head>
        <title>
            Test
        </title>
        <style>
        .bgcolor1{
            background-color:black;
        }
        .bgcolor2{
            background-color:grey;
        }
        </style>
        <script type="text/javascript">

        </script>
    </head>
    <body class="bgcolor1">
        <button onclick="this.className = 'bgcolor2'">Change COLOUR</button>
    </body>
</html>

As you can see when the user click on the button it should change the class to "bgcolor2" so the background color would be grey but it just changes the background color of the button to grey & not the document! So how can I change the background color of document with css or js or what's the problem with this code? thx ...



Solution :

<button onclick="document.body.className = 'bgcolor2'">Change COLOUR</button>

this refers to the button and not the body. document.body.className = 'bgcolor2';


    CSS Howto..

    CSS property padding-top only works on the first element of a list. How do I apply to all the elements?

    slideshow banner without using flash

    How to position element between two sections while also being responsive?

    How to make an item background visible on overflow?

    How to make text float on top of an image html css

    jQuery hide / show class not changing css for future added elements

    How to change CSS of last tab in Bootstrap Tab

    In CSS/SVG, how to rotate each character of a word?

    CSS: How to fit a circular progress bar according to screen size (mobile)

    how to increase/decrease font-size from external css [closed]

    How do you center a picture AND left align text that is touching said picture? HTML5

    How to use externel CSS and (static) images in Go, Google App Engine

    Why is there a vertical scrollbar, and how to get rid of it?

    CSS: how to properly style horizontal menu bar with background image and centered entries separated by icons

    How to “float” an absolutely positioned element div out of its container

    how to use both fixed and relative position property in same page using css?

    How can I display these images with CSS instead of HTML?

    How to fix an image compared with another one in CSS?

    How to organize CSS - table columns

    How to wrap a DIV around a DIV with CSS

    How To Style background-image CSS

    How to vertically align numbers of ol?

    How to overlay a form field over an image with a fixed width?

    CodeIgniter how to add link to static file

    How to show inline help using simple css and jquery

    how to align text input in Angular-Material tool bar?

    How do I select every other div class element using just CSS (no js)

    how to highlight currently opened page link in css

    How to get chevron to align to center of link tab

    How to make a div fill the entire page height using css? [closed]