The N shortcut 2 isn't working


#1

Please help! I've been working on this for almost an hour and the code matches that in the Hint box, but it still keeps giving me the same error.

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.

I even copy/pasted the code in the hint box and it STILL gives me that error. What am I doing wrong?
My code is below.

var main = function() {
  $('.article').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();
  
  }
  
  else if(event.which === 110) {
    var currentArticle = $('.current');
    var nextArticle = currentArticle.next();

    currentArticle.removeClass('current');
    nextArticle.addClass('current');
 }
};




$(document).ready(main);


#2

@inarisullivan,
You are forgetting to close the document =keypress= Eventhandler

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

#3

Like this? That still gives me the same error.

$(document).keypress(function(event) {
});
if(event.which === 111) {
$('.current').children('.description').toggle();

}


#4

@inarisullivan

$(document).keypress(function(event) {
     if(event.which === 111) {
           $('.current').children('.description').toggle();

     }
 });

#5

That hasn't worked either. I'm still getting the same error. Everything was correct up to the last block of code for the else if event.


#6

@inarisullivan

var main=function() {
     $('.article').click(function() { 
     }); 

     $(document).keypress(function(event) {
     });
   };
  $(document).ready(main);

In our main function we are defining 2 Event-handler
1 a click Event-handler attached to all articles
2 a keypress Event-handler attached to the whole document

= = = = = = a click Event-handler attached to all articles = = = = =

In this Event-handler we want to do 4 things:
1 Select-all-Elements which have the class-atribute "article" set
- and remove the Class-attribute "current"
- $('.articles').removeClass('current');

2 Select-all-Elements which have the class-attribute "description" set
- and perform the hide Method on these Elements.
- $('description').hide();

3 Select-the-Element which was just clicked-on using $(this)
- and add the Class-attribute _'current'
- $(this).addClass('current');

4 Select-the-Element which was just clicked-on using $(this)
- we now have access to the whole of the DOM-tree of this Element
- and out of this selection of Elements represented in the DOM-tree,
- and are the so-called Children of $(this)-Element,
- choose those Element(s) which have the Class-attribute 'description' set
- and on this sub-selection perform the show Method.
- $(this).children('.description').show()

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

The IF ELSE-IF-statement must be read as:
The IF-verb,
its condition in parenthesis ( )
and a code-block encapsulated in opening & closing curly-brackets-{ }

if ( condition1 ) {
// this code which will be executed IF CONDITION1 is TRUE
}

Now if condition1 rendered to false the if { code-block} is NOT executed
and if the JavaScript-parser finds an ELSE-IF-statement
it will start to evaluate that statement,
with it's condition2
and if this condition2 renders to true,
the { code-block } will be executed.

if ( condition1 ) {
     // this code which will be executed IF CONDITION1 is TRUE
}
else if ( condition2 ) {
        // condition1 ran into a -false-
        // this code which will be executed IF CONDITION2 is TRUE
}

Now encapsulated within the keypress Event-handler
as its function-body

$(document).keypress( function(event) {
    if ( condition1 ) {
        // this code which will be executed IF CONDITION1 is TRUE
    }
    else if ( condition2 ) {
       // condition1 ran into a -false-
       // this code which will be executed IF CONDITION2 is TRUE
    }
  });

++++++++++++++++++++++++++++++++++++++++

As a function of the keypress Event-handler we are going to evaluate
the object which we get as a return value in the variable event.
_( An object has one or more properties
Each property consists of a property-key and it's associated VALUE )_

If we write event.which
we are reading the associated VALUE of the which property-key.
We are using the Decimal column of the table
http://msdn.microsoft.com/en-us/library/60ecse8t(v=vs.80).aspx
( arrow left-37 up-38 right-39 down-40 )
and we see that the letter o is represented with the Decimal value 111

if ( event.which === 111 ) {
// if you have made the preview-screen on-focus by clicking in the 'green'
// and you have pressed the o-keyboard-key
// the "description" will be shown
// of the article which is carrying the Class-attribute 'current'.
} herewith we close the if code-block

if ( event.which === 111 ) {
   $('.current').children('.description').toggle();
   // replace .toggle() with .show()
}

Now if didn't press the o key but for instance the n-keyboard-key
(looking in the Decimal column we see the VALUE 110)
Now we are entering the ELSE-IF
else if ( event.which === 110) {
// we are going to capture the jQuery object which we get
// as return VALUE of using the jQuery-Selector $('.current')
// var currentArticle = $('.current');

// as all articles are Siblings to each other,
// we can use the next() Method
// to orientate ourselves on the next 'article'
// and capture the returned jQuery Object
//we assign this returned jQuery Object to its own variable
// var nextArticle = currentArticle.next();

// now want to remove the Class-attribute 'current' from the currentArticle
// currentArticle.removeClass('current');
// we want the next-'article' to carry this Class-attribute 'current' by addClass
//**nextArticle.addClass('current');**
// you will see the current'article' will lose it's highlight
// and the next'article' will be highlighted.
} we close the ELSE-IF statement !!

  $(document).keypress(function(event) {
     // if the "o" keyboard-key is pressed
     if ( event.which === 111 ) {
       $('.current').children('.description').toggle()
     }
     // if the "n" keyboard-key is pressed
     else if ( event.which === 110 ) {
       var currentArticle = $('.current');
       var nextArticle = currentArticle.next();
       // swap the Class-attribute 'current'
       currentArticle.removeClass('current');  //it loses highlight
       nextArticle.addClass('current');  // it is highlighted
     }
     // if the "a" keyboard-key is pressed.
     else if ( event.which === 97 ) {
        $('.item').toggle();
        $('.description').toggle();
     }
    });

#7

@inarisullivan

If you use $( )
you are using the so called jQuery selector

The selector will select ALL the HTML-Elements of the active HTML-page,
which have an attribute equal to the one you use as an argument.

Thus if you use
$(".article") you are selecting all the HTML-Element's
which have the class="article" set
( you will find 7 Article's)

The jQuery Selector will create an object
which will contain all those selected Elements. AND its children..

Talking in terms of DOM (=Document Object Model )
you select a parent and all its children which are in its tree

Here is the how the Document Object Model view looks like for
this HTML-page..

                   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

The numbers in the Diagram
represent the line-number in the index.HTML file.

So to get to the articles we follow the path
html -> 7-body -> 8-div
(we landed at the PARENT of ALL the Articles)
Those Articles are the CHILDREN to this PARENT.
And the CHILDREN between themselves are SIBLINGS.
And ALL these CHILDREN are carrying the Class article.

In this Diagram i have
put the current Class on the 4th Article...
this would happen if you clicked on the 4th-Article
at wich point you have this article at your fingers via this

$('.article').removeClass('current'); attribute class=current from all those Elements.

$('.description').hide();

$(this).addClass('current'); this as the way to identify this Element, add the Class attribute "current", which via the style.CSS file will cause the change of color via the .current CSS-object,
but from now on if we use the jQuery Selection with the argument '.current'
like $('.current') , we know that we have selected 1 Article-Element, with ALL its CHILDREN

$(this).children('.description').show(); clicked-on Article and ALL its Elements, and from this collection of Elements, choose the Element with the Class "description" set, and show that Element and all its Children.

\==================================
$('.description').show(); Class "description" and show them...you will see all 7 Articles with their description shown.

$('.current').children('.item').toggle()
$('.current').children('.description').toggle()
< select the current Article and ALL it member Elements
step 1 , hide the Article-line using the ".item" Class as sub-selection
step 2 , show the Children Elements of the Parent with Class "description"

google search
== the Book ==
jquery [your question] site:developer.mozilla.org
CSS [your question] site:developer.mozilla.org
javascript [your question] site:developer.mozilla.org
[your question] site:jquery.com
[your question] site:getbootstrap.com

== discussions / opinions ==
jquery [your question] site:stackoverflow.com
CSS [your question] site:stackoverflow.com
javascript [your question] site:stackoverflow.com

== guidance ==
www.crockford.com
[your question] site:crockford.com
- - http://javascript.crockford.com/code.html << Javascript coding convention
- - http://javascript.crockford.com/survey.html

http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page
http://www.w3schools.com/jquery/trysel.asp
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
++ bootstrap
http://getbootstrap.com/getting-started/
http://getbootstrap.com/2.3.2/components.html
We now have .col-xs (phones), .col-sm (tablets), .col-md (desktops), and .col-lg (large desktops).


#8

That is not helpful. I found that already and it hasn't helped at all. Everything is correct, but it keeps me giving me the same error. It all worked with the 'o' shortcut, then I added in the 'n' shortcut stuff and it all stopped working. I've even gone back to the previous lessons in this section and it ALL works until I added the new code to the bottom. Now it won't move on.
The only thing I see that is different to the Hint, is here: var nextArticle = currentArticle.next(); where the last next is orange instead of white like the rest of the text on that line. It's also white in the hint. I tried deleting and re writing that line, but it automatically changed the next to orange when I finished the word


#9

@inarisullivan
Well then display the full code you are using now....


#10

var main = function() {
$('.article').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();

}
});

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

currentArticle.removeClass('current');
nextArticle.addClass('current');

}
});

$(document).ready(main);

Where it says var nextArticle = currentArticle.next(); the last next is orange, but in the hint it's white and that'as the only thing I'm seeing that is different.


#11

@inarisullivan

var main = function() {
   $('.article').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();
      }
          ///}); closing-Eventhandler to early 1st-Error
      else if(event.which === 110) {
        var currentArticle = $('.current');
        var nextArticle = currentArticle.next();
        currentArticle.removeClass('current');
        nextArticle.addClass('current');
      }
   }); // closing =keypress= Eventhandler
}; // forgot closing main-function-body    2nd Error
$(document).ready(main);

#12

I did what you said and it's still giving me the error. What is the full code I'm meant to be using here?


#13

@inarisullivan,
The full code is in my prior post.
I tested the code in the lesson "The n shortcut 2"
and got a pass....

Maybe....
++++ reset of session *****************
under certain circumstances you can shoot your Browser in an
inconsistent state.

Therefor it is of an advantage to know that you have 2 reset facilities:

One is the use of the F5-key which does a refresh Browser

and

Two, select&copy your code
Then use the Reset Code button of the course-window,
then paste your code back in.

Addendum
General Notes:
Always refresh the browser after making corrections:
CTRL f5 ( if on Windows or Linux)
CMD r ( if on a MAC).
CTRL 0 to reset browser zoom


#14

I'd already tried to copy it and then reset the code and I got the same error, but refreshing the browser worked, so thank you for that one.


#15

Did you get this working? Like you, I was having problems getting this to work. It turns out that the line:
var currentArticle = $('.current');
needs to have '.current' and I forgot the dot (.).

You have the same error... first line right under the 'else if' statement.


#16

@leonhard.wettengmx.n

Your post were very educational and exact. If students would listen, follow, and then apply the knowledge passed down.


#17

This happens to me, too...


#18

Hello,

If it helps, I had the same problem and noticed a capital letter in the wrong place and once correct it worked (I had nextArticle.addCLass('current'); instead of nextArticle.addClass('current');).


#19

thank you @leonhard.wettengmx.n that really helped


#20

Thanks that is a very informed lesson. Thanks for all of your time