Stuck: The n shortcut 2


#1



https://www.codecademy.com/courses/web-beginner-en-4hxyb/0/9?content_from=make-an-interactive-website%3Ajquery-events#


I've been stuck here for a while. I get the error message:

Oops, try again. It looks like the n key isn't moving to the next article. Remember to remove the 'current' class from currentArticle and place it on nextArticle.

My code follows. I've searched through the forum and haven't found any answer that worked. I'm wondering if perhaps my problem is in one of the other files. Any help is appreciated!


var main = function() {
    $('.article').click(function() {
        $(document).keypress(function(event) {
            if(event.which === 111) {
                $('.current').children('.description').toggle();
                }
            else if(event.which===110) {
                var currentArticle = $('.current');
                var nextArticle = currentArticle.next();
                
                currentArticle.removeClass('current');
                nextArticle.addClass('current');
                }
            });
        
        $('.article').removeClass('current');
        $('.description').hide();
        
        $(this).addClass('current');
        $(this).children('.description').show();
        });
};

$(document).ready(main);


#2

@coreslayer26660
You have pasted-in your document =keypress= Eventhandler

       $(document).keypress(function(event) {
            if(event.which === 111) {
                $('.current').children('.description').toggle();
                }
            else if(event.which===110) {
                var currentArticle = $('.current');
                var nextArticle = currentArticle.next();
                
                currentArticle.removeClass('current');
                nextArticle.addClass('current');
                }
            });

into the middle
of your article =click= Eventhandler

    $('.article').click(function() {
        $('.article').removeClass('current');
        $('.description').hide();
        
        $(this).addClass('current');
        $(this).children('.description').show();
        });

the structure of our main-function looks like:

var main = function() {
     //BEGIN of main function-body 
    //
    //The CLICK event-handler is

    $('.article').click(function() {

     });

     //now comes the KEYPRESS event-handler

     $(document).keypress(function(event) {

       });
   //END of main function-body
   };

  $(document).ready(main);

#3

That's exactly it, thanks! If I'm understanding the issue correctly your various handlers should be (generally) separated in the main function, correct? So that way they can independently work?


#4

@coreslayer26660,

What you should understand.....
As you open a HTML-Document with your Browser
the index.html file is loaded using a Document Object Model pattern

As the script-Tag is reached
the =main= function is loaded into memory...but NOT yet executed......

With the jQuery-Statement
$(document).ready(main);
the Browser will execute the =main= function
as soon as the ready-Flag has been set.

After the =main= function has been executed
you have attached 2 Eventhandlers
-1 =click= Eventhandler to all HTML-Element which are carrying the "article" class
-1 ==keypress= Eventhandler to the whole-of-the-HTML-document.

===========================================================

http://www.codecademy.com/forum_questions/546b3ce952f8632fb6001b20
http://www.codecademy.com/forum_questions/5488c6049376766b1b00056e

http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page


#5

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