I am attempting to utilize jquery to dynamically change the background image of a webpage based on different cases in a JavaScript switch statement. I have completed three steps:
1) Included this script tag in my HTML document:
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
2) Set up my switch case (which I confirmed is being triggered) in the HTML document like this:
function calcBackground() {
switch(counter) {
case 1:
$('body').toggleClass('background1');
break;
case 2:
$('body').toggleClass('background2');
break;
case 3:
$('body').toggleClass('background3');
break;
default:
//no significant action
}
}
3) Added the following CSS code:
body {
background-repeat: no-repeat;
background-image:url('http://hdwallpicture.com/wp-content/uploads/2013/08/Blue-Widescreen-HD-Wallpapers.jpg');
background-size: 100% auto;
}
body.background1 {
background-image:url('http://hdwallpicture.com/wp-content/uploads/2013/08/Blue-Widescreen-HD-Wallpapers.jpg');
}
body.background2 {
background-image:url('http://3.bp.blogspot.com/-vmh1i-b3XNY/T9iTjPGKYZI/AAAAAAAAFwo/jv3Yysxcl9Q/s1600/Blue-wallpaper-23.jpg');
}
body.background3 {
background-image:url('http://wallpaper4god.com/wallpapers/blue_1269_1076x768.jpg');
}
Note: The URL for body.background1 is intentionally the same as the default background URL for the page. However, the backgrounds are not changing when the switch statement is executed.
What could be missing or incorrect in my implementation?