Try it out - Event Handler


#1

The exercise:
https://www.codecademy.com/skills/make-an-interactive-website/topics/jquery-events/jquery-event-object-try

My code:

var main = function() {
  $(document).keypress(function(event) {
	  if(event.which === 103) {
			$('.btn').toggleClass('.btn-like');
		}
  });
};

$(document).ready(main);

Pressing 'g' does not work. However, the program lets me advance. Anyone know what I'm missing?

Thanks in advance!


#2

@wattro
+++++ addClass removeClass

Every HTML-Element has so called attributes.
One of the possible attributes, is the class-attribute.

If you write the HTML-document, you add the class-attribute
within the Element-Tag by using the syntax
class-keyword = then a string
containing the class-name
OR mutliple class-names which are =separated=from=eachother= by a space

Thus with

 <div class="myClass1 myClass2 myClass3" ></div>

you now have a DIV-Element carrying 3 classes myClass1, myClass2 and myClass3

As part of its CSS-category-of-Methods jQuery gives you the ability
to manipulate this class-attribute
by providing the addClass()-, removeClass()-, toggleClass()-Methods.
You will have to provide the Method at least 1 argument
which is the string VALUE of the class-name.
Thus you have to change
$('.btn').toggleClass('.btn-like');
into
$('.btn').toggleClass('btn-like');

The confusion when to use a pre-pending dot or NOT...
In the Cascading Style Sheet syntax,
you have to prepend-a-dot to the classname
so the CSS will interpret it as a class-attribute
So in the file style.css you will find an object
identified by .btn-lke,
In this .btn-like object
the background property-key is set to a particular VALUE

jQuery uses the same syntax to identify a class-attribute
like in the jQuery-selector
$(".btn") by which this HTML-Element and all it's CHILDREN
are selected into a jQuery-object,

This parent-HTML-Element carries the class-attribute with class-name "btn"


#3

Great! Thank you. I understand my error, now. :smile: I didn't realize the class-ness of it all (In retrospect, I may have, if the css were available or if I had written those portions).