6 Help, Can't find problem!


#1

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 = $('.active-dot').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);


#2

Hi Денис,

Your problem is on line 6:

$('.arrow.next')

is selecting something with the classes of arrow and next. You need to be selecting .arrow-next, though, which is one class:

$('.arrow-next')

Good luck with the rest of the course!

Also, when you ask questions, please give a link to the exercise you're on and what error message you're getting :)


#3

on line 6 where your code is: var nextDot = $('.active-dot').next();

i think it should be: var nextDot = currentDot.next();


#4

@jkrula It's probably better to use currentDot, but since the exercise doesn't pass/fail you because of that, it doesn't matter too much.


#5

I"m struggling too. I'm getting an error that reads "Oops! Try again, remember to move the '.active-dot' from the current dot.
Here is my code
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);


#6

On lines 13 & 14 you have an extra . in there. When using addClass or removeClass you write is as ('active-dot') because the class identifier (ie that period before the class name like '.active-dot') is understood (you're specifically working with classes here so you dont need to say "class" this or that. In short :

addClass('.active-dot'); should be addClass('active-dot"); etc .. but only when working with the add/remove class functions!! HTH!


#7

I tried that and I am still getting the same error:

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);


#8

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

I'm also having the same problem and checked all the remarks you made.

Here's the code I used:

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.lenght == 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);

Uff :pensive:


#9

Hey @katmio,

Would you mind creating a new topic please? Someone will be happy to help you over there, but this one is getting a bit full :)