CODEWITHSUNDEEP
javascripthtmlcss
Nevershow2016
Nevershow2016

Reputation: 570

Change background with button

I am trying to make it so that when the user clicks on a restyle button it will change the background to the images stored in my folder. I have a couple, and then you can choose to reset back to the normal image, however for some reason I cant get it to work, any help would be great on this matter:

HTML buttons 

<a href="#" onclick="changeLook()">ReStyle</a>
<a href="#" onclick="changeBack()">Reset</a>

Javascript 

var counter = 0; 
function changeLook(){
    counter += 1;
    switch (counter) {
        case 1:
            document.body.style.backgroundImage = "../Image/BackgroundImage2.jpg";
            break;
        case 2:
            document.body.style.backgroundImage = "../Image/BackgroundImage3.jpg";
            break;
        case 3:
            counter = 0;
            document.body.style.backgroundImage = "../Image/BackgroundImage4.jpg";
            break;
    }
}

function changeBack(){
    document.body.style.backgroundImage = "../Image/BackgroundImage1.jpg";
}

CSS

body {
    padding-top: 23px;
    padding-bottom: 10px;
    background: url('../Image/BackgroundImage1.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Upvotes: 0

Views: 80

Answers (3)

Rion Williams
Rion Williams

Reputation: 76607

You absolutely could use your current code. If it isn't working, then the issue is likely that your relative paths within your CSS files for your background properties are incorrect.

It's important to remember that the paths used within a CSS file will be relative to the CSS file itself and not where it is referenced. However, when you use the relative references in your Javascript code, it will be made relative to where the Javascript is referenced (i.e. your HTML document).

You may want to consider defining CSS styles to handle these changes :

body.background1 {
     background: url('../Images/Image1.jpg');
}
body.background2 {
     background: url('../Images/Image2.jpg');
}
/* Continue as necessary */

And then simply update the class for your <body> element using Javascript :

// Use the counter to determine which style to apply
switch (counter) {
    case 1:
        document.body.className = "background1";
        break;
    case 2:
        document.body.className = "background2";
        break;
    case 3:
        counter = 0;
        document.body.className = "background3";
        break;          
}

Example

You can see a very basic example of this here and demonstrated below :

enter image description here

Upvotes: 1

Shady Alset
Shady Alset

Reputation: 5714

Just add url(image path) like:

document.body.style.backgroundImage = "url(../Image/BackgroundImage2.jpg)";


var counter =0; 
function changeLook() {
    counter += 1;

    switch (counter) {
        case 1:
            document.body.style.backgroundImage = "url(http://placehold.it/200x200)";
            break;
        case 2:
            document.body.style.backgroundImage = "url(http://placehold.it/300x300)";
            break;
        case 3:
            counter = 0;
            document.body.style.backgroundImage = "url(http://placehold.it/400x400)";
            break;          
    }
}

function changeBack(){
    document.body.style.backgroundImage = "url(http://placehold.it/200x200)";
}
body {
    padding-top: 23px;
    padding-bottom: 10px;
    background: url('http://placehold.it/200x200') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
<a href="#" onclick="changeLook()">ReStyle</a>
<a href="#" onclick="changeBack()">Reset</a>

Upvotes: 2

Anthony E
Anthony E

Reputation: 11245

It's likely that you're referencing your file paths incorrectly. Check your developer console within your browser. Do you see any 404 errors?

Additionally, you can simplify your changeLook function by using a modulus:

var counter = 1; 
function changeLook(){
   counter = counter % 4 + 1;
   document.body.style.backgroundImage = "../Image/BackgroundImage" + counter + ".jpg";
}

function changeBack() {
  document.body.style.backgroundImage = "../Image/BackgroundImage1.jpg";
}

Upvotes: 1

Related Questions