CODEWITHSUNDEEP
javascripthtmlcssconsole
akchaps
akchaps

Reputation: 1

First click of element doesn't work, second click does

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";
}

Upvotes: 0

Views: 90

Answers (1)

Aneeq Ak
Aneeq Ak

Reputation: 63

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";
}

Upvotes: 1

Related Questions