0

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 :)

Community
  • 1
  • 1
Alex
  • 3
  • 1
  • 1
    I'd suggest indenting your code to get a better idea of what's getting called when.. – Nebula Jan 02 '16 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 Jan 02 '16 at 17:04
  • 1
    In fact a `for` loop would probably be a better approach overall here. – Nebula Jan 02 '16 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 Jan 02 '16 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 Jan 02 '16 at 19:45

2 Answers2

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)

Cyxo
  • 506
  • 3
  • 11
0

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. :)

jh42
  • 78
  • 9