9. The 'N' Shortcut


#1

Hi i am having the same problem as most of the people who have posted about this lesson but still cannot seem to get it to work. i have read @leonhard_wettengmx_n post going into detail about this lesson and still cannot get it. it is giving me "Syntax error, unexpected end of input". Can someone explain to me where i have gone wrong? Thank you!

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


#2

Can you pls copy your code here @mcneelands1? And i will love to help you!


#4

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


#5

@mcneelands1,
The error-message indicates that a =function=-definition was not properly closed with its closing-curly-bracket-}

Change your code

}
 });

$(document).ready(main);

into

 });
}
$(document).ready(main);

#6

A post was split to a new topic: Exercise 9 - Need Help on "The 'N' Shortcut"


#7

am stucked at 9.can experts solve this urgent problem


#8

@amonkibet,

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'.
// with a closing-curly-bracket-} 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.
// with a closing-curly-bracket-} 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();
     }
    });