6. Next Dot 1


#1

Hello, not sure what I'm doing wrong here. Here's my code:

var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
}

$('.aarow-next').click(function() {
var currentSlide = $('active-slide');
var nextSlide = currentSlide.next();

var currentDot = $();
var nextDot = currentDot.next('active-dot');

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

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

});
}

$(document).ready(main);


#2

EDITED CODE:

var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
}

$('.aarow-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 still getting Error Message and not sure why:

Oops, try again.
Remember to remove '.active-dot' from the current dot.

#3

@giannamoglino
Look closely at your code, you've got many errors:

Here, you closed the function too fast(the rest of your code is not included in the function main!). Remove the }); } part.

The class is .arrow--next not .aarow-next.

You declared a variable which selects anything!

You are selecting a class or an id? When it's a class, you should put a dot before naming the class or a # before naming the id.

Your semicolon should be after the curly brackets located at the end of your variable function to end an instruction, not before the curly brackets!
Please look back at your code carefully.


#4

Thanks, @miniapple8888 . Here's my revised code, but I'm still getting an error message.

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


#5

@giannamoglino You can't have a dot (.) inside an addClass() or removeClass() function call. The dot is to distinguish a class from being an #id or a tag name. But those functions know that they're getting a class, so there's no need for the dot :slightly_smiling: