for循环不会进入，不确定为什么

Question

I am trying to make a moving image gallery where every 4 seconds the image scrolls across.

I link to the javascript correctly, I'm sure of it.

Here is the javascript, I would like to know what's wrong with it.

var slideIndex = 0;
image();

function image() {
  alert("Entered Function");

  var i;
  var x = document.getElementsByClassName("slideshow");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = none;
    alert("Entered Loop");
  }
  slideIndex++;
  if (slideIndex > x.length) {
    slideIndex = 1;
  }
  x[slideIndex-1].style.display = "block";
  setTimeout(image, 4000);
}

Any ideas? Thanks

EDIT: The missing quotes around style.display = none is not the issue. I just forgot to add them back after testing the code.

Answer 1

The reason is being, when the script is executed, the elements aren't present. I believe, you are executing the scripts way before the elements are loaded. There are two ways to handle this:

1. Use onload eventListener.
2. Load the scripts after the elements are loaded.

And moreover, there's an error in the code, if you check the console. The = none; is not right. It should be a string. Change the line to:

x[i].style.display = "none";

A snippet here demonstrates that it works if you load the script after the elements are loaded.

 <div class="slideshow">Slide 1</div> <div class="slideshow">Slide 2</div> <div class="slideshow">Slide 3</div> <div class="slideshow">Slide 4</div> <div class="slideshow">Slide 5</div> <script> var slideIndex = 0; image(); function image() { alert("Entered Function"); var i; var x = document.getElementsByClassName("slideshow"); for (i = 0; i < x.length; i++) { // Error here: x[i].style.display = "none"; alert("Entered Loop"); } slideIndex++; if (slideIndex > x.length) { slideIndex = 1; } x[slideIndex - 1].style.display = "block"; setTimeout(image, 4000); } </script> 

You can see that the above code is working as expected.

Answer 2

Your problem is when you set display property:

Change this x[i].style.display = none; to x[i].style.display = 'none'; , otherwise you will get an error like ReferenceError: none is not defined , which prevents alert from firing:

  var slideIndex = 0; image(); function image() { alert("Entered Function"); var i; var x = document.getElementsByClassName("slideshow"); for (i = 0; i < x.length; i++) { x[i].style.display = 'none'; alert("Entered Loop"); } slideIndex++; if (slideIndex > x.length) { slideIndex = 1; } x[slideIndex-1].style.display = "block"; setTimeout(image, 4000); } 

 <div class='slideshow'></div> <div class='slideshow'></div> <div class='slideshow'></div>