I am attempting to alter the background color of my entire page when the div with id main is clicked. You can view the code here:
$(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>However, I have noticed that the background color also changes when clicking on elements other than main. This might be happening because everything is contained within the main div.