Problem on 6/12


#1

Hi there.

this is what i wrote :

var main = function() {
$('.dropdown-toggle').click(function() {
    $('.dropdown-menu').toggle();
});
$('.arrow-next').click(function() {
    var currentSlide = $('.active-slide');
    var nextSlide = currentSlide.next();
    
    if(nextSlide.length == 0) {
        nextSlide = $('.slide').first();
    }
    
    currentSlide.fadeOut(600).removeClass('.active-slide');
    nextSlide.fadeIn(600).addClass('.active-slide');
   
    
    var currentDot = $('.active-dot');
    var nextDot = currentDot.next();
    
    currentDot.removeClass('.active-dot');
    nextDot.addClass('.active-dot');
    });
 } 
$(document).ready(main);

this does not work, as it return "Remember to remove '.active-dot' from the current dot."

So according to the Hint panel i tried this :

var main = function() {
$('.dropdown-toggle').click(function() {
    $('.dropdown-menu').toggle();
});
$('.arrow-next').click(function() {
    var currentSlide = $('.active-slide');
    var nextSlide = currentSlide.next();
    
    var currentDot = $('.active-dot');
    var nextDot = currentDot.next();
    
    if(nextSlide.length == 0) {
        nextSlide = $('.slide').first();
    }
    
    currentSlide.fadeOut(600).removeClass('.active-slide');
    nextSlide.fadeIn(600).addClass('.active-slide');
   
    currentDot.removeClass('.active-dot');
    nextDot.addClass('.active-dot');
});
    } 
$(document).ready(main);

which seems much more logical to me, but i get the same panel : "Remember to remove '.active-dot' from the current dot" plus this error message : "Uncaught ReferenceError: currentDot is not defined".
I really don't see where's my mistake nor do I understand why does it behave that way. Could you help me out and explain to me what is going on ? Thank you !


#2

This code however does work :

var main = function() {
$('.dropdown-toggle').click(function() {
    $('.dropdown-menu').toggle();
});
$('.arrow-next').click(function() {
    var currentSlide = $('.active-slide');
    var nextSlide = currentSlide.next();
    var currentDot = $('.active-dot');
    var nextDot = currentDot.next();
    
    if(nextSlide.length == 0) {
        nextSlide = $('.slide').first();
    }
    
    currentSlide.fadeOut(600).removeClass('.active-slide');
    nextSlide.fadeIn(600).addClass('.active-slide');
   
    
 
    currentDot.removeClass('.active-dot');
    nextDot.addClass('.active-dot');
    });
 } 
$(document).ready(main);

but I still do not understand why.
Plus if the code seems to be correct, the dots succesion does not work. And the slides are locked after the second one.
Any explanation would be very much appreciated !
Thank you !


#3

I think that in "removeClass" or "addClass" syntax you shouldn't put dot in the class.. example addClass('active-dot') not addClass('.active-dot')


#4

I thought of that too but it does not seem to affect the working of the code. I actually managed to pass to step 10 haphazardly with this at the end of my code :

currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('.active-slide');
        });

wich does not make any sense.