0

I'm trying to show next slide on Next Button Click with the following code, but when I click the Next button the currentSlide function is not working. I have even made the functions global but still it's not working

The code which isn't working is the below, in console i can see the message ok and index value is also fine but the currentSlide function isn't working:

// When next is clicked
        $('.next-slide').click(function() {
            var index = $(this).attr('data-index')
            currentSlide(index);
            console.log('ok');

        });

Full Code

$(document).ready(function(){
        // The below code is for evaluation quiz slider
        var slideIndex = 1;

        window.plusSlides = function(n) {
            showSlides(slideIndex += n);
        }

        window.currentSlide = function(n) {
            $('.next-slide').attr('data-index', n);
            showSlides(slideIndex = n);
        }

        window.showSlides = function(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            if (n > slides.length) {slideIndex = 1}
            if (n < 1) {slideIndex = slides.length}
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex-1].style.display = "inline";
            dots[slideIndex-1].className += " active";
        }
        showSlides(slideIndex);

        // When next is clicked
        $('.next-slide').click(function() {
            var index = $(this).attr('data-index')
            currentSlide(index);
            console.log('ok');

        });
    });
Or Assayag
  • 5,662
  • 13
  • 57
  • 93
Imad uddin
  • 147
  • 1
  • 2
  • 11
  • 1
    How is the function "not working"? On a separate note: `currentSlide(index);` you would be passing a *string* here and it appears as if you want to pass a number. I don't know if it's related to your problem – VLAZ Oct 14 '18 at 16:36
  • @vlaz i was missing `;` at `var index = $(this).attr('data-index')` – Imad uddin Oct 14 '18 at 16:42
  • 1
    @Imaduddin In JS, *semicolons* `;` are optional at the end of statement. So, that should not be the problem – vrintle Oct 14 '18 at 16:44
  • But that shouldn't matter in this code - [ASI](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi) should make the statement with and without a semicolon equivalent. – VLAZ Oct 14 '18 at 16:45
  • @rv7 are you sure `;` doesn't matter? Plus i added `index++` below `var index = $(this).attr('data-index')` so i think it was not incrementing the index value and was calling the first slide each time! – Imad uddin Oct 14 '18 at 16:53
  • @Imaduddin as long as the `index++` and `var index = $(this).attr('data-index')` are separate lines, `;` is optional – vrintle Oct 14 '18 at 16:58

0 Answers0