This forum is now read-only. Please use our new forums! Go to forums
Uncaught TypeError: Cannot read property of 'next' 'prev'
Hey guys: I have already finished the Flipboard course, and am able to move on to the next excercise, however the dots never become active when I click on the arrows. The slides change as they’re supposed to, but the first dot is always active and will not change to the next/prev dot. This is showing as an error when I click on the right arrow: Uncaught TypeError: Cannot read property ‘next’ of undefined. And this when I click the left one: Uncaught TypeError: Cannot read property ‘prev’ of undefined. I just want to understand what’s wrong with my code. Why was I able to reach this far without this message ever showing until now! This is what my code looks like:
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();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
var currentDot = $('.active-dot');
var nextDot = nextDot.next();
if(nextDot.length == 0){
nextDot = $('.dot').first();
}
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();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
var currentDot = $('.active-dot');
var prevDot = prevDot.prev();
if(currentDot == 0) {
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot')
});
}
$(document).ready(main);
Answer 55fb7655e39efea7ac000026
var nextDot = nextDot.next();
This won’t work. You were supposed to get next sibling of the current dot.
currentDot.removeClass('.active-dot');
nextDot.addClass('.active-dot');
These methods accepts only class names (look at their names) therefore do not attach dots at the beggining.
var prevDot = prevDot.prev();
As above.
if(currentDot == 0) {
prevDot = $('.dot').last();
}
You should check for the prev dot’s length in order to know it if there is no more elements.
Popular free courses
- Free Course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner friendly,4 LessonsLanguage Fluency - Free Course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner friendly,11 LessonsLanguage Fluency - Free Course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner friendly,6 LessonsLanguage Fluency