9. The n shortcut 2


#1

Hi all, am having a problem with my code in section 9. My code looks like this:

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

My problem is that codecademy tells me: "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." and I keep getting an "Uncaught SyntaxError: Unexpected identifier" message. Does anyone know what's wrong with my code?

Thank you.


#2

@hellofangirl,

If the =keypress= Eventhandler is set,
then if a keyboard-key is pressed,
the =keypress= Eventhandler will create a so-called object
which we capture in the variable event
https://api.jquery.com/keypress/

Now if the keyboardkey-o is pressed
the event object will look like

{
  property-key: associated-property-Value,
  originalEvent: [object KeyboardEvent],
  type: keypress,
  isDefaultPrevented: function returnFalse() {
      return false;
  },
  timeStamp: 1452077297712,
  jQuery1102025962655247357735: true,
  keyCode: 111,
  key: o,
  charCode: 111,
  char: o,
  which: 111,
  view: [object Window],
  target: <input id="target">,
  shiftKey: false,
  relatedTarget: undefined,
  metaKey: false,
  eventPhase: 2,
  currentTarget: <input id="target">,
  ctrlKey: false,
  cancelable: true,
  bubbles: true,
  altKey: false,
  delegateTarget: <input id="target">,
  handleObj: [object Object],
  data: null,
  isPropagationStopped: function returnFalse() {
     return false;
  },
  isImmediatePropagationStopped: function returnFalse() {
     return false;
  },
  preventDefault: function() {
       var e = this.originalEvent;

	         this.isDefaultPrevented = returnTrue;
	         if ( !e ) {
		      return;
		}

		// If preventDefault exists, run it on the original event
		if ( e.preventDefault ) {
			e.preventDefault();

		// Support: IE
		// Otherwise set the returnValue property of the original event to false
		} else {
			e.returnValue = false;
		}
	},
   stopPropagation: function() {
		var e = this.originalEvent;

		this.isPropagationStopped = returnTrue;
		if ( !e ) {
			return;
		}
		// If stopPropagation exists, run it on the original event
		if ( e.stopPropagation ) {
			e.stopPropagation();
		}

		// Support: IE
		// Set the cancelBubble property of the original event to true
		e.cancelBubble = true;
	},
stopImmediatePropagation: function() {
		this.isImmediatePropagationStopped = returnTrue;
		this.stopPropagation();
	}
}

Now if we use

event.which

we are accessing the property-key =which=

which: 111

and event.which will give us the associated number Value


#3

the problem is on the "else if line. You are missing the "."
else if(event.which === 110) {

I was having problem here and saw your code and i was missing the "}" that comes before the else if statement lol. so Thanks for your help :+1: