Previous Dot 1/2


#1



Hi, so on previous dot 1 I can save and submit my code but I get the error message: Uncaught SyntaxError: Unexpected identifier. It doesn't appear on previous dot 2 but I then get the message: Oops, try again. Remember to remove '.active-dot' from the current dot.

Any help would be great, thanks.

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


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

Uncaught SyntaxError: Unexpected identifier

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

$(document).ready(main);


#3

@along94,

You will have to change

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

into

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

+++++ addClass removeClass

Every HTML-Element has so called attributes.
One of the possible attributes, is the class-attribute.

If you write the HTML-document, you add the class-attribute
within the Element-Tag by using the syntax
class-keyword = then a string
containing the class-name
OR mutliple class-names which are =separated=from=eachother= by a space

Thus with

 <div class="myClass1 myClass2 myClass3" ></div>

you now have a DIV-Element carrying 3 classes myClass1, myClass2 and myClass3

As part of its CSS-category-of-Methods jQuery gives you the ability
to manipulate this class-attribute
by providing the addClass()-, removeClass()-, toggleClass()-Methods.
You will have to provide the Method at least 1 argument
which is the string VALUE of the class-name.
Thus you have to change
**$('.article').removeClass('.current')
$(this).addClass('.current')**
into
**$('.article').removeClass('current')
$(this).addClass('current')**

The confusion when to use a pre-pending dot or NOT...
In the Cascading Style Sheet syntax,
you have to prepend-a-dot to the classname
so the CSS will interpret it as a class-attribute
So in the file style.css you will find an object
identified by .current,
In this .current object
the background property-key is set to a particular VALUE

jQuery uses the same syntax to identify a class-attribute
like in the jQuery-selector
$(".current") by which this HTML-Element and all it's CHILDREN
are selected into a jQuery-object,

This parent-HTML-Element carries the class-attribute with class-name "current"

Reference::

google search
class site:jquery.com
https://api.jquery.com/category/selectors/
http://api.jquery.com/class-selector/
https://api.jquery.com/element-selector/
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
http://www.w3schools.com/jquery/trysel.asp

what is CSS explained site:developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/What_is_CSS


#4

I removed the dot but I'm still getting the same error message.

This is my updated 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();
    nextDot = $('.dot').first();
    }

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

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
    var currentSlide = $('.active-slide');
    var prevSlide = currentSlide.prev();

    var currentDot = $('.activeDot')
    var prevDot = currentDot.prev();

    if(prevSlide.length == 0) {
     prevSlide = $('.slide').last();
     prevDot = $('.dot').last();
     }

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

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

};

$(document).ready(main);


#5

@along94,

Have a close look at

'.activeDot'


#6

Ah thank you, thats got it!


#7

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