Need help with Previous Dot 2. I get error message "Oops, try again. Remember to remove '.active-dot' from the current dot."


#1



https://www.codecademy.com/en/courses/web-beginner-en-seyrq/0/11?content_from=make-an-interactive-website%3Ajquery-effects


I get the following message "Oops, try again. Remember to remove '.active-dot' from the current dot.". Bellow is my code.


var main = function () {
    $('.dropdown-toggle').click(function() {
        $('.dropdown-menu').toggle();       
    });
    
        $('.arrow-prev').click(function() {
        var currentSlide = $('.active-slide');
        var prevSlide = currentSlide.prev();
        
        if (prevSlide.length == 0)  {
            prevSlide = $('.slide').last();
            prevDot = $('.dot').last();
        }      
      
        currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('active-slide');
    }
    
    $('.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();
            nextDot = $('.dot').first()
        }
        
        currentSlide.fadeOut(600).removeClass('active-slide');
        nextSlide.fadeIn(600).addClass('active-slide');
        
        currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot'); 
        
    });
    
});




$(document).ready(main);


#2

Hi Dramos1981,

prevDot = $('.dot').last();

You haven't defined currentDot or prevDot yet, you'll need to do that just after defining currentSlide and prevSlide :slight_smile:


#3

hi i just did that but it didn't work.


#4

@dramos1981 Please post your updated code, then :slight_smile:


#5

var main = function () {
    $('.dropdown-toggle').click(function() {
        $('.dropdown-menu').toggle();
        
        $('.arrow-prev').click();
        currentSlide = $('.active-slide');
        prevSlide = currentSlide.prev();
        
        if (prevSlide.length == 0) 
            prevSlide = $('.slide').last();
            prevDot = $('.dot').last();
        
        
        currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('active-slide');
    });
    
}; 
    
    
    $('.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();
            nextDot = $('.dot').first()
            
        currentSlide.fadeOut(600).removeClass('active-slide');
        nextSlide.fadeIn(600).addClass('active-slide');
        
        currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot');
        
        
        }; 
        
});
        






$(document).ready(main);

Here it is.


#6

@dramos1981

if (nextSlide.length == 0) {
  nextSlide = $('.slide').first();
  nextDot = $('.dot').first()

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

  currentDot.removeClass('active-dot');
  nextDot.addClass('active-dot');
    
    
};

The currentSlide.fadeOut(...), nextSlide.fadeIn(...), currentDot.removeClass(...), and nextDot.addClass(...) lines belong outside of your if statement, after the closing curly brace (}) there.

Then, you need to close your main function in the morning with a single closing curly brace just before $(document).ready(main); :slight_smile:


#7

Thnaks man it worked.


#8

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.