Change CSS background image with click - while loop not working

Question

probably just a little problem for someone who knows what he's doing...

I'd like to create something like this: https: //marvelapp.com/404 The Gif is loaded as fullscreen background und when you push "space" you get another gif and so on. After all the gifs are seen, the loop begins again.

So I searched how to do this and I found this approach (option 3): https: //www.linkedin.com/pulse/20140702040804-99746459-change-css-background-image-with-click (also used here: How to change css background-image on click? ) There it doesn't work with space but with mouse-click what is even better.

I tried to insert a while loop to get it working with more than two pics but... it doesn't work and I don't know why

My approach: http://jsfiddle.net/h3mfk347/

function updateIndex(){
while (index < 4) {
    index++;
}
} index = 0;
bodyObj.onclick = function(e){
e.currentTarget.className = className[index];
updateIndex();
}

So I guess it's more a question of the loop than of the other parts.

Thanks for any help or hint :)

I'd suggest indenting your code to get a better idea of what's getting called when.. — Nebula
– Nebula, Commented Jan 2, 2016 at 17:02
Also, why are you declaring index outside of your function call? Why not define it inside, i.e. var index = 0; while ... — Nebula
– Nebula, Commented Jan 2, 2016 at 17:04
In fact a for loop would probably be a better approach overall here. — Nebula
– Nebula, Commented Jan 2, 2016 at 17:04
I suppose you aren't interpreting the while loop the way you're supposed to. Everything in the while loop happens at once, until the condition at the top of the loop is true. This makes your while loop doing the same thing as just setting the index to 4. — Nebula
– Nebula, Commented Jan 2, 2016 at 17:06
Yeah, "while loop" means "do this until a condition is met." If you want to check whether or not a condition is met that's a simple "if." — Raydot
– Raydot, Commented Jan 2, 2016 at 19:45

Cyxo · Accepted Answer · 2016-01-02 17:09:43Z

2

You don't need a loop, use a "if" (conditional structure) :

if (index < 4) {
    index++;
} else {
    index = 0;
}

Your while loop will add 1 to index until index is 4 and then put it back to 0 so it would restart.

Also the class names (in your CSS) can't begin with a number (like #body.4 and #body.5), but must begin by a letter (like #body.img4)

edited Jan 2, 2016 at 17:09

answered Jan 2, 2016 at 17:07

Cyxo

5263 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nebula Over a year ago

I assume you mean "and" between #body.4 and #body.5?

jh42 · Accepted Answer · 2016-01-02 17:17:39Z

I'd recommend using jQuery, which is a bit simpler:

HTML:

<script src='path-to-jquery.js'></script>
<div id="body" class="backgroundImage" style='background-image: url("http://lorempixel.com/300/200/sports/1"); max-width:200px; max-height:200px;'></div>

Javascript:

images = [
  'http://lorempixel.com/300/200/sports/1',
  'http://lorempixel.com/300/200/sports/2',
  'http://lorempixel.com/300/200/sports/3',
  'http://lorempixel.com/300/200/sports/4', // This seems to not be a valid image, but meh
];

index = 0;

$('.backgroundImage').click(function(){
    if (index < (images.length-1)) { // This uses length-1 because the array is 0-indexed.
    index++;
  } else {
    index = 0;
  }
    $(this).css({
    'background-image' : "url(" + images[index] + ")",
  });
});

http://jsfiddle.net/xp60m5pq/

Basically what we're doing here is defining a starting image in the HTML (you could also use CSS for that, as you had done), and then rather than changing the class, when the div is clicked it simply uses CSS to change the background image based on the array you've defined. :)

Collectives™ on Stack Overflow

Change CSS background image with click - while loop not working

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related