Interactive Website: Newsreader Help


#1

I am on the n shortcut 2 and I copied and pasted the hint into my code, but it still says "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." This is what my code looks like:

$(document).ready(main);
$(document).keypress(function(event) {
if(event.which === 111) {
...
}

else if(event.which === 110) {
var currentArticle = $('.current');
var nextArticle = currentArticle.next();

currentArticle.removeClass('current');
nextArticle.addClass('current');
}
Could someone tell me what I'm doing wrong? Thanks!


#2

@olbrsz,

This explanation tries to give you the insight, in the structure of your
main-function.
It consists of 3 parts:
1 The structure of the main-function
2 The structure with comments and 2 Event Handlers...
3 The structure stripped of most comments.

1 The structure of the main-function

You are defining a function by the name main.

var main = function() {
     //BEGIN of function-body 
    //
    //Here comes all the code that will
    //be excuted, AFTER the DOCUMENT is READY
    // $(document).ready(main);

   //END of function-body
   };

  $(document).ready(main);

2 The structure with comments and 2 Event Handlers...

Within the function-body of the main function
we are going to define 2 so-called EVENT-Handlers
1 click-event-handler
2 keypress-event-handler

var main = function() {
     //BEGIN of function-body 
    //
    //The CLICK event-handler is
    //  attached to ALL elements with class=".article" in index.html
    // by using the -selector- $('.article') we SELECT all articles.
    $('.article').click(function() {
        //BEGIN of CLICK function-body
       //
       // Here we put all the code which is
       // executed when we CLICK on an -article-

       //END of CLICK function-body && CLICK event-handler
     });

     //now comes the KEYPRESS event-handler
     // this is attached to the WHOLE of the HTML-page//document
     //by using a -selector- $(document) we select the WHOLE page..

     $(document).keypress(function(event) {
          //BEGIN of KEYPRESS function-body

       //Here comes the code which is executed 
       // as a KEYBOARD key is Pressed we know which-key is pressed
       //by evaluating the EVENT.WHICH value.
       //  http://msdn.microsoft.com/en-us/library/60ecse8t(v=vs.80).aspx
       // look in the column "Dec"

       //END of KEYPRESS function-body && close of KEYPRESS event handler
       });
   //END of function-body
   };

  $(document).ready(main);

3 The structure stripped of most comments.

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