My javascript slidshow code is not working

Question

I have no clue why. I have checkt everything but it should work. This shuld be a slidshow for a webseit

<script src="JS/javascript.js">
    "use strict";
    var image = ['"bilder/1.png"','"bilder/2.png"'];
    var i = 0;

    aengereHintergrund();

    function aengereHintergrund() {
      document.getElementById('hintergund').style.backgroundImage = 'url('+image[i]+')';
      if(i < image.length){
      i ++

      }
      else {
        i = 0
      }
     setTimeout(aengereHintergrund(),3000);
    }
   </script>

Open your console and check the error. What is `src="JS/javascript.js"`? — GuyT, Mar 27 '18 at 18:50
If your script tag has a `src` attribute specified, the embedded script is *ignored*. — , Mar 27 '18 at 18:54
Looks like you are messing in the usage of setTimout and setTimeInterval also https://stackoverflow.com/questions/2696692/setinterval-vs-settimeout — Md Johirul Islam, Mar 27 '18 at 18:55

score 0 · Accepted Answer · answered Mar 27 '18 at 19:04

Oh, the classic function reference vs invocation problem.

Here's what you wrote:

setTimeout(aengereHintergrund(),3000);

And here's what you should have written:

setTimeout(aengereHintergrund,3000);

In the second case, we're passing the function aengereHintergrund itself to setTimeout, which is what we want. In the first case, you're invoking aengereHintergrund, and passing its result (which is nothing, aka undefined) to setTimeout.

(Note: You should also probably use setInterval instead of setTimeout, so you don't have to invoke it again and again. Also also, instead of branching on i >= image.length you can just use i = (i + 1) % image.length).

score 0 · Answer 2 · answered Mar 27 '18 at 19:25

If you write if (i < images.length) i++;, i will reach images.length. You can fix this error with i++; if (i >= images.length) i = 0;, or i = (i + 1) % images.length; :

var slides = document.getElementById("slides");
var images = ["v67W6.jpg", "USehe.jpg"];
var path = "https://i.stack.imgur.com/";
var i = 0;

nextSlide();

function nextSlide () {
  var bg = "url(" + path + images[i] + ")";
  slides.style.backgroundImage = bg;
  i = (i + 1) % images.length;
  setTimeout(nextSlide, 1000);
};

<img id="slides" width="300" height="100" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

My javascript slidshow code is not working

2 Answers2