第一次单击元素不起作用，第二次单击起作用

Question

https://alexkchapman.com/Vans.html

On any of the three images (and on mobile the nav button) on my site, the first click doesn't work, but following clicks do. Console is logging that a click is registered, but the image doesn't change.

Here's the relevant js:

var slideIndex = [1, 1, 1];
/* Class the members of each slideshow group with different CSS classes */
var slideId = ["slides1", "slides2", "slides3"];
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
  console.log(n);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {
    slideIndex[no] = 1
  }
  if (n < 1) {
    slideIndex[no] = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex[no] - 1].style.display = "block";
}

Answer 1

So your code is not that bad but you should select slides by js class selector and the final code will look like this: (I recommend using this code not your's because your code is complicated)

 // var slideIndex = [1, 1, 1]; // /* Class the members of each slideshow group with different CSS classes */ // var slideId = ["slides1", "slides2", "slides3"]; // showSlides(1, 0); // showSlides(1, 1); // showSlides(1, 2); var slides = document.getElementsByClassName('slides'); var slideIndex = 0; function plusSlides() { slideIndex++; showSlides(slideIndex); } function showSlides(Index) { if (Index >= slides.length) { slideIndex = 1; } if (Index < 0) { slideIndex = slides.length; } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideIndex].style.display = "block"; }

 <div class="slideshow"> <div class="slides fade"><img src="img/header.jpg" width="100%"></div> <div class="slides fade"><img src="img/header1.jpg" width="100%"></div> <div class="slides fade"><img src="img/header2.jpg" width="100%"></div> <div class="slides fade"><img src="img/header3.jpg" width="100%"></div> </div>

Problems in your code are explained in comments:

 // Select slides via class,,;,,;,;,;,; // var slideIndex = [1, 1, 1]; // /* Class the members of each slideshow group with different CSS classes */ // var slideId = ["slides1". "slides2"; "slides3"], // showSlides(1; 0). // showSlides(1; 1). // showSlides(1. 2); // You only need to increment slideIndex and run showSlides again function plusSlides(n. no) { showSlides(slideIndex[no] += n; no). console.log(n); } // here you only have to hide every slide and show the one with the index of slideIndex function showSlides(n. no) { var i. var x = document;getElementsByClassName(slideId[no]). // big mistake // every thing below is fine if (n > x.length) { slideIndex[no] = 1 } if (n < 1) { slideIndex[no] = x;length } for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } // execpt this line x[slideIndex[no] - 1].style.display = "block"; // should be like this // x[slideIndex].style.display = "block"; }