7/10 O shortcut won't work


#1

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

$(document).ready(main);

The above is my full code from the excersise. I have followed my instructions and cannot pass! It is constantly showing "Expected ';'" Any help?


#2

@joshbaldassarre,

As a starter, I took the index.html apart...
This is a Document Object Model representation
The numbers are the line-numbers where the Tag can be found...
So we have a 76-div which in this diagram has the class attribute current
I will use this diagram as reference in the explanation in separate Post's
( this is what DOM looks like when clicked on the 4th Article )

                   html
                    |
      + - - - - - - + - - - - - -+
      |                          |
      3                          7
     head                       body
      |                          |
  + - + - +          + - - - - - + - - - - - - +
  |       |          |           |             |
  4       5          8          165           166
 link    link       div        script        script
                 .articles
                 .container
                     |
 + - - - + - - - + - + - + - - - + - - - + - - - +
 |       |       |       |       |       |       |
 10      32      54      76      98     120     142
 div     div     div     div     div    div     div  < .article
                      .current                     sibling's  
                          |                          .next()
           +- - - - - - - + - - - - - - - - +
           |                                |
           77                               88
          .item                        .description
           div                              div
            |                                |
  + - - - - + - - - -+           + - - - - - + - - - - -+
  |         |        |           |           |          |
  78        81       84          89          90         94
  div       div      div         div         div        div
                                              |
                                      + - - - + - - - +
                                      |               |
                                      h1              p

By using the description-class in the jQuery selector $('.description')
you will create a jQuery object which has 7 properties
which are the 7 div Element's that have the class="description" set.
We hide them all by using:
$('.description').hide();

By using the current-class in the jQuery selector, $(".current")
you will create a jQuery object which has 2 Children
being the 77-div and the 88-div,
these can be targeted by using their ".item" or ".description" class-attribute
$('.current').children('.description').show();

In this diagram you see that the 8-div has 7 Children,
These Children are Siblings to each other,

  8-div - - - - -+
                  | /7-Children/
        .article  + 10-div [first-child]
                  |
        .article  + 32-div    As these div's are
                  |           'siblings' of each-other
                  |           we can use the
                  |           .prev() and .next() methods
                  |                           to navigate
        .article  + 54-div [prev]
                  |
        .article  + 76-div class="current"  - +/2children/
                  |                           + 77-div .item
        .article  + 98-div [next]             |
                  |                           + 88-div .description
        .article  +120-div                    
                  |
        .article  +142-div [last-child]

++ explain main click-event-handler && keypress-event-handler +++++

79 is uppercase O, 111 is lowercase o. (courtesy to Roy aka mtf)
78 is uppercase N, 110 is lowercase n.
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);

#3

@leonhard_wettengmx_n

This might sound stupid but i have fixed my own problem!

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

$(document).ready(main);

I had 2 unnesecary }); in my code.
Thanks for the help anyway


#4

@joshbaldassarre,

-1

Have a close look at

artcile

-2
With your

var main = function() {
              $(".artcile").click(function() {
                  $('.article').removeClass('current');
                  $('.description').hide();
                  $(this).addClass('current');
                  $(this).children('.description').show();
              });
     };

you have =closed= the main function.....
Your document =keypress= Eventhandler will NOT be part of this main function.....

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