Bamboozled


#1

Lesson 6. Next Dot 1:

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

After hours scanning this code I still get the error message "Oops, try again. Remember to remove '.active-dot' from the current dot."

Here's 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);

Any ideas? Many thanks!


#2

Here is how your code should look like

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

I hope you see it now. But long story short, you didn't put your code inside the main function like you should have done. Otherwise everything was ok.


#3

Wonderful, thanks!

When you're using JQuery to build interactivity into websites should the code always be inside the main function of the form: var main = function(){ }; $(document).ready(main);?


#4

No problem, glad I could help!

Usually, you just use it like this

$(document).ready(function(){
   // your code here
});

Or like this

$(function(){
  // your code goes here
}):

You will probably use it like that a lot more often than making a variable and assigning a function to it and then calling that variable inside $(document).ready(variable_name). It will cause less confusion I believe and you can put all functions and variables you will write to marked place, and it should be easier to control and close brackets in right places.

I'm not sure what way is Codecademy encouraging, but both the way you had to use, and these 2, are just fine. There are probably some performance differences but that shouldn't worry you at this point.


#5

Really appreciate your patient and detailed answers, thanks again.