CODEWITHSUNDEEP
javascripthtmlcss
tristantzara
tristantzara

Reputation: 5917

Change div background image with JS

I am trying to place background images for divs with JS and change those images on mouse over and on click. I am trying to do it like this:

window.onload; {
    var replies = document.getElementsByClassName("reply-wrapper");
    var retweets = document.getElementsByClassName("retweet-wrapper");
    var favs = document.getElementsByClassName("fav-wrapper");

    for (var i = 0; i < replies.length; i++) {
        replies[i].style.backgroundImage = "url(images/reply.png);";
    }
    for (var i = 0; i < retweets.length; i++) {
        retweets[i].style.backgroundImage = "url(images/retweet.png);";
    }
    for (var i = 0; i < favs.length; i++) {
        favs[i].style.backgroundImage = "url(images/favorite.png);";
    }
}

But for some reason it won't work. Aprropriate divs have right classes and adding them to collection works fine, but placing images itself doesn't work. What am I doing wrong? P.S. Wanna write it in pure JS, no jQuery. P.P.S For some reason placing image with innerHTML works fine. Why?

Upvotes: 2

Views: 4744

Answers (5)

kockburn
kockburn

Reputation: 17636

There are two issues:

  1. Like Jamie Dixon mentioned it needs to be window.onload = function(){}
  2. favs[i].style.backgroundImage = "url(images/favorite.png);"; should be favs[i].style.backgroundImage = "url(images/favorite.png)"; The extra ; will cause your link not to work. So remove the extra semi-colon from the rest of your links.

Update with explanation:

#room1 {
  background-image: url('image/example.png');
}

In the example above you'll notice the semi-colon. Like in any programming language this is to say that this is the end of the command. Sometimes semi-colon's are optional ( like in certain cases found in js ).

JS isn't CSS. Even if you apply a style to your html element, you are using JS and not CSS. This is why you don't need the ; inside the quotes.

Upvotes: 2

Chad
Chad

Reputation: 81

The event handler window.onload needs to be assigned a function to invoke. So, you just need to add the keyword 'function' before the block of code and then assign that to window.onload. Additionally, if you want to play nice with other code on the page you could grab a reference to any existing onload handler and then invoke in your onload function.

var oldOnLoad = window.onload;

window.onload = function() {
  if (typeof oldOnLoad === 'function') {
    oldOnLoad();
  }
  var replies = document.getElementsByClassName("reply-wrapper");
  var retweets = document.getElementsByClassName("retweet-wrapper");
  var favs = document.getElementsByClassName("fav-wrapper");

  for (var i = 0; i < replies.length; i++) {
    replies[i].style.backgroundImage = "url(images/reply.png)";
  }
  for (var i = 0; i < retweets.length; i++) {
    retweets[i].style.backgroundImage = "url(images/retweet.png)";
  }
  for (var i = 0; i < favs.length; i++) {
    favs[i].style.backgroundImage = "url(images/favorite.png)";
  }
};

Note: it might be worth mentioning that loading the background images in the onload event handler could cause your page to appear to load slow because it will wait for all other content on the page to finish loading. You might want to do something like instead:

<div id="reply-wrapper" style="display: block; width: 250px; height: 250px;"></div>
<script>
(function() {
    document.getElementById('reply-wrapper').style.backgroundImage = "url(//dummyimage.com/250x250/000/fff)";
})();
</script>

Upvotes: 2

Ganesh Yadav
Ganesh Yadav

Reputation: 2685

i should be: 

window.onload = function() {
var replies = document.getElementsByClassName("reply-wrapper");
var retweets = document.getElementsByClassName("retweet-wrapper");
var favs = document.getElementsByClassName("fav-wrapper");

for (var i = 0; i < replies.length; i++) {
    replies[i].style.backgroundImage = "url(images/reply.png);";
}
for (var i = 0; i < retweets.length; i++) {
    retweets[i].style.backgroundImage = "url(images/retweet.png);";
}
for (var i = 0; i < favs.length; i++) {
    favs[i].style.backgroundImage = "url(images/favorite.png);";
}
}

you DOM is calling even before window got load.

Upvotes: 0

Gandharva Bettadpur
Gandharva Bettadpur

Reputation: 147

I don't see a function name for the code. Is it incomplete?
this might be the error.

window.onLoad;

Try this:

function fn_load(){
 // Your statements
 }

and in the body do this:

Upvotes: 0

Jamie Dixon
Jamie Dixon

Reputation: 54021

It looks like you've made a slight mistake when assigning your code to the window.onload event.

Your code needs to be in a function assigned to the onload event.

window.onload = function () { /* Your Code */ };

instead of:

window.onload; { /* Your Code /* }

Upvotes: 3

Related Questions