Change background color of whole page on click at main div

Question

I try to change the background color of my whole page, on click on my div with id main. Here is my code:

$(document).ready(function() {

    var color = 1;
            
    $('#main').click(function(){
        if (color == 1)   {
            $(this).css("background-color", "green");
            color = 2;
        } else if (color == 2) {
            $(this).css("background-color", "black");
            color = 1;
        }                 
    });
});

#admin_div {
    position: absolute;
    width: 80%;
    height: 80%;
    border: 2px solid white;
    border-radius: 10px;
    background-color: #D9D9D9;
    z-index: 1;
}   

h1 { 
  margin-left: 15px; 
}

#main {
 height: 100%;
 width: 100%;
 z-index: 0;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div id="main">
    <div id="admin_div">  
      <h1>Admin Panel</h1>
   </div>
</div>

But the background color is also changing if i click on another element than main. I think it is because everything is inside the main div.

Consider to use relevant indentation, your code is unreadable... Now in click handler, pass event and check for `if(event.target !== this) return;` — A. Wolff, Nov 25 '15 at 10:30
@EdwardBlack Is requirement to change `#main` background color as well ? — guest271314, Nov 25 '15 at 10:32
@EdwardBlack What result is not being returned by `js` at Question ? — guest271314, Nov 25 '15 at 10:35
But `$(this)` refers to `#main` in click handler. Whole page would be `$('body')`... And i misunderstood you expected behaviour, your issue has nothing to do with `if(event.target !== this)`, this is what happen usually when i'm trying to understand question with unreadable code... ;) — A. Wolff, Nov 25 '15 at 10:35
@A.Wolff _"It should only change #main background color"_ http://stackoverflow.com/questions/33914056/change-background-color-of-whole-page-on-click-at-main-wrap-div#comment55589810_33914056 ? — guest271314, Nov 25 '15 at 10:36
@guest271314 OK, i'm completly lost to understand question... ;) No i guess it is because the `#admin_div` has position absolute and background set. Again, i'm copmletly lost... — A. Wolff, Nov 25 '15 at 10:38
@A. Wolff, stop confusing me pls. Can you explain how my code is "unreadable"? Maybe you should reinstall your browser, because i can read it with no problem. — Black, Nov 25 '15 at 10:38
@EdwardBlack This is correctly indented code: http://jsfiddle.net/22m0to5o/2/ Isn't it more readable§?! BTW, you said: `I try to change the background color of my whole page` & then: `It should only change #main background color`. So who is confusing people??? — A. Wolff, Nov 25 '15 at 10:40
@A. Wollf, thats much more complicated to read then my code. You can tell way easier and faster whats happening if you look at my code, instead of yours, but okay... — Black, Nov 25 '15 at 10:41
@EdwardBlack There is some rules regarding indentation, you aren't following any here... — A. Wolff, Nov 25 '15 at 10:42
@A.Wolff, oh do i have to go to jail now because i broke the "rules"? My code is still much easier to read then yours, so i don't give a f — Black, Nov 25 '15 at 10:44
Who cares about these stupid rules which makes code unnecessary complicated? Every beginner will understand much faster whats happening if he looks at my code, then at yours. — Black, Nov 25 '15 at 10:46
You probably try to look more intelligent to others if you make your code much more complicated then it actually is — Black, Nov 25 '15 at 10:53
@EdwardBlack `You probably try to look more intelligent to others if you make your code much more complicated then it actually is` You make my day, really. Thx — A. Wolff, Nov 25 '15 at 10:57
I will never understand why people make things more complicated then necessary. — Black, Nov 25 '15 at 10:58

z1m.in · Accepted Answer · 2015-11-25T10:56:31.990

6

Clicking on red color (target div) everything work like exprected

http://jsfiddle.net/22m0to5o/1/

var color = 1;

$('#main').click(function (event) {

    if (event.target !== this) return;

    if (color == 1) 
    {
        $('body').css("background-color", "green");
        color = 2;
    } 
    if (color == 2) 
    {
        $('body').css("background-color", "black");
        color = 1;
    }

});

edited Nov 25 '15 at 10:56

answered Nov 25 '15 at 10:35

z1m.in

1,661
13
19

1

`if(event.target !== this) return;` Solved my problem. Thx. – Black Nov 25 '15 at 10:39
Select this as the answer please – Blank Nov 25 '15 at 10:41
I don't like your coding style tho – Black Nov 25 '15 at 10:55
It's not my coding style in fiddle and in answer. – z1m.in Nov 25 '15 at 10:55

score 1 · Answer 2 · answered Nov 25 '15 at 11:35

This is a kind of useless piece of JavaScript code, although I suppose it could be useful for something. Whether this is just a waste of time or not, I will present you with the code straightaway, that will allow you to dynamically change the background color of the page.

<script language="JavaScript">
<!--
function changeBGC(color){
document.bgColor = color;
}
//-->
</script>

I think it is quite simple.

score 0 · Answer 3 · answered Nov 25 '15 at 10:40

if you want to change the background color of the whole page, just rewrite the jquery code. change $(this) to $('body').

 <script>
$(document).ready
(
    function()
    {
        var color = 1;

        $('#main').click
        (
            function()
            {
                if (color == 1)
                {
                    $('body').css("background-color", "green");
                    color = 2;
                } 
                else if (color == 2)
                {
                    $('body').css("background-color", "black");
                    color = 1;  
                }

            }
        );

    }
);
</script>

Change background color of whole page on click at main div

3 Answers3