Lesson 6 & 7 (next dot) glitch?


#1



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


In lesson 6 the code won't work unless these two lines are written as follows

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

In lesson 7 the code won't work unless these two lines are written as follows, which I am assuming is the right way.

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

The difference being the . before active-dot

Replace this line with your code.


#2

@cedwardmid,
If you read https://api.jquery.com/removeclass/
you will find that the syntax is using the classname ( without a pre-pending dot ) as an argument


#3

This still doesn't explain why the same lines of code are getting errors for different reasons on different lessons.


#4

@cedwardmid,
Maybe if you give us the FULL codes you were using & EXACT message you got....
we could give you the explanation


#5

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

Oops, try again.
When on the last slide, it looks like next arrow isn't wrapping back
to the first dot. Look back at the instructions and check the code
inside the if statement.


#6

@cedwardmid,
You really have to use

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

The "active-slide" class-name
which is used in the so-called class-attribute
of one of the div's which is allready carry-ing the class-attribute with the class-name "slide"

Have a read
https://www.codecademy.com/forum_questions/5615308ab62548021c0000e4
to get some DOM-pictures of the HTML-document....

You should also keep in mind....

++++ reset of session *****************
under certain circumstances you can shoot your Browser in an
inconsistent state.

Therefor it is of an advantage to know that you have 2 reset facilities:

One is the use of the F5-key which does a refresh Browser

and

Two, select&copy your code
Then use the Reset Code button of the course-window,
then paste your code back in.

Addendum
General Notes:
Always refresh the browser after making corrections:
CTRL f5 ( if on Windows or Linux)
CMD r ( if on a MAC).
CTRL 0 to reset browser zoom