Using Javascript to change background image of a div

Question

So I've been struggling with my Javascript skills using my books to get through it but I've finally found something that I can't seem to cobble together with just the books alone. What I'm trying to do is change the css background-image of a div with an id of belowNav every couple-few seconds below is the code I have that is returning no errors in the console but effectively not functioning(literally not doing anything) If someone with more JS skills than I could help it would be much appreciated :)

    setInterval(function changeImage(){
    var el = document.getElementById("belowNav");
    var currentImage = 0;
    var backImage = ["img2.png",
                        "IMG_3880.JPG",
                        "IMG_6629.JPG",
                        "IMG_6552.JPG",
                        "IMG_4090.JPG",
                        "IMG_0005.JPG",
                        "IMG_0041.JPG",
                        "IMG_6544.JPG",
                        "IMG_6628.JPG",
                        "IMG_5168.JPG",
                        "coffee.jpg"]
    var lastImage = backImage.length+1;
    for (var i = 0; i < 10; i++); {
    currentImage = i;
    el.style.backgroundImage = "%resource("+backImage[currentImage]+")%";
        if(i == 10){
        i = 0
            }//end if
        }//end for
    }, 2000);//end Function

What's "%resource("? Also, do you realize that your for loop runs completely each time your changeImage is executed? — j08691
– j08691, Commented Oct 30, 2015 at 16:44
thanks for the quick replies, the %resource is how(according to the internet) rapidweaver finds it resources without the user having to use '../' or '/' at all. kinda neat but seems fragile from a code aspect. added the ; and the url, waiting on push to see if it fixed it. — Spencer Davis
– Spencer Davis, Commented Oct 30, 2015 at 16:47
its a mac-only IDE that claims code-free development. Very cool but if you want things that look good to happen you have to invest a bunch of money in plugins and stacks. bleck I prefer code but my bosses rather have me use it because its faster than coding. this is an issue with making a site look super good and this is the only way to do so. — Spencer Davis
– Spencer Davis, Commented Oct 30, 2015 at 16:50

showdev · Accepted Answer · 2020-04-14 18:42:07Z

I made a few modifications to your code.

Primarily, your code loops from 0 to 10 upon each call to the changeImage function. It seems that you want to advance the image index only once per call, in order to change the background to the next image in the array.

I've used url() for the background image, per CSS background-image.

I've also moved variable definitions outside of the function, as they do not need to be redefined upon each call.

var el = document.getElementById("belowNav"),
  backImage = [
    "https://via.placeholder.com/400x150?text=One",
    "https://via.placeholder.com/400x150?text=Two",
    "https://via.placeholder.com/400x150?text=Three"
  ],
  imageIndex = 0;


function changeImage() {
  el.style.backgroundImage = "url('" + backImage[imageIndex] + "')";
  imageIndex++;
  if (imageIndex >= backImage.length) {
    imageIndex = 0;
  }
}

setInterval(changeImage, 2000);
changeImage();

div#belowNav {
  width: 400px;
  height: 150px;
}

<div id="belowNav"></div>

Justin B. Evans · Accepted Answer · 2015-10-30 16:52:28Z

1

Almost there! The CSS background property is wrapped within a url('') wrapper, so this line:

el.style.backgroundImage = "%resource("+backImage[currentImage]+")%";

Should be

el.style.backgroundImage = "url('"+backImage[currentImage]+"')";

I wasn't sure what %resource is referring to, so I removed those references. Credit to imnancysun for writing this first though!

answered Oct 30, 2015 at 16:52

Justin B. Evans

213 bronze badges

1 Comment

showdev Over a year ago

It sees that the code has other issues, as well. It still does not function as expected.

Collectives™ on Stack Overflow

Using Javascript to change background image of a div

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related