Apply Active Class to Prev Dot Error (I am applying it)


#1


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

Oops, try again. Remember to add '.active-dot' to the previous dot.


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();
            nextDot = $('.dot').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')
        
    });
    $('.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');
        
        var currentDot = $('.active-dot');
        var prevDot = currentDot.prev();
        
        currentDot.removeClass('active-dot');
        prevDot.addClass('active-dot');
    });
    
   }
    
    
$(document).ready(main);


#2

This should compare both value and type. Use triple equals symbol, here.

You should now have,

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

#3

I changed that and it still doesn't work.

Im getting this error: Oops, try again. Remember to add '.active-dot' to the previous dot.
This is my changed code.

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();
            nextDot = $('.dot').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')
        
    });
    $('.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');
        
        var currentDot = $('.active-dot');
        var prevDot = currentDot.prev();
        
        currentDot.removeClass('active-dot');
        prevDot.addClass('active-dot');
    });
    
   }
    
    
$(document).ready(main);

#4

Hello @zystvan,

Please could you help out? OP hasn't gotten issue fixed.

Thank you. :slight_smile:


#5

@jake.32 You need to create the currentDot and prevDot variables before your if statement inside the previous arrow's click event listener. That's because the if statement is modifying the prevDot variable like it exists, but it doesn't and so the program won't work properly :slight_smile:


#6

Thank you so much! I was struggling so much and it was so simple.


#7

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