Changing background in html with JS and button

Question

I have some a JS function written to change bg image via a button click, and then back to the original bg when button clicked again. Below is my JS.

    const nextBackgroundImageUrl = {
            "url('../images/pexels_bg.jpeg')": "url('/images/bbyshrk.jpg')",
            "url('../images/bbyshrk.jpg')": "url('/images/pexels_bg.jpeg')"
        }   


function changeImg() {

   const currentBackgroundUrl = document.body.style.backgroundImage;
    console.log("current bg url:" + currentBackgroundUrl);      
    document.body.style.backgroundImage = nextBackgroundImageUrl[currentBackgroundUrl];

}

In the console.log I get nothing after "Current bg url", therefore currentBackgroundUrl isn't grabbing the bg image. Am I using the wrong style property to grab the img? I need the URL.

Thank you!

You're accessing an undefined property of nextBackGroundImageUrl. There *is* no [currentBackgroundUrl] index. Are you trying to compare them? The easiest thing to do would be to use a class to switch it. Then, you could even have an animation that handles the animating. — Joel Hager, May 15 '20 at 03:35
You have declared nextBackgroundImageUrl as an object but it should be an array based on your ueecase. See this https://stackoverflow.com/questions/10867503/change-background-image-in-body — Prateek Kumar Dalbehera, May 15 '20 at 03:38

score 1 · Answer 1 · answered May 15 '20 at 03:40

This is what I'd recommend. You can easily swap the images in CSS, and even do different animations pretty seamlessly. I can amend my answer to do it your way if that's what you really want, but I really feel this would be a better application, personally.

function changeBG() {
document.body.classList.contains("alt") ? document.body.classList.remove("alt") : document.body.classList.add("alt");
}

body {
  background-image: url('https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&h=350');
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 1s ease-in;
}

body.alt {
  background-image: url('https://images.pexels.com/photos/2265082/pexels-photo-2265082.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
}

<button onClick="changeBG()">Change BG</button>

score 1 · Answer 2 · answered May 15 '20 at 03:45

Hi an example with colors (but is almost the same with images), is this:

const nextBackgroundImageUrl = {
  original: "green",
  red: "red",
}   

const button = document.getElementById("change-background");

button.addEventListener("click", changeBackground);

function changeBackground() {
  const currentColor = document.body.style.backgroundColor;
  const originalColor = nextBackgroundImageUrl.original; 
  
  document.body.style.backgroundColor = currentColor === originalColor ? nextBackgroundImageUrl.red : originalColor; 
}

<button id="change-background">Change background</button>

score 0 · Answer 3 · answered May 15 '20 at 04:29

Here I attached a solution that might help in your following criteria.

const nextBackgroundImageUrl = {
    "url('../images/pexels_bg.jpeg')": "url('/images/bbyshrk.jpg')",
    "url('../images/bbyshrk.jpg')": "url('/images/pexels_bg.jpeg')"
};

// you can also loop over the object - (nextBackgroundImageUrl)
const firstImg = nextBackgroundImageUrl[Object.keys(nextBackgroundImageUrl)[0]];
const secondImg = nextBackgroundImageUrl[Object.keys(nextBackgroundImageUrl)[1]];
let currentBackgroundUrl = document.body.style.backgroundImage;
const changeBgBtn = document.querySelector('.change-bg');

// first time we set a background image if not found
function populateBgImage() {
    if (!currentBackgroundUrl) {
        currentBackgroundUrl = firstImg;
    }

    document.body.style.backgroundImage = currentBackgroundUrl;
}

populateBgImage();

function changeImg() {
    currentBackgroundUrl = currentBackgroundUrl === firstImg ? secondImg : firstImg;
    populateBgImage();
}

changeBgBtn.addEventListener('click', changeImg);

<button class="change-bg">Change Background image</button>

Changing background in html with JS and button

3 Answers3