Corrections/Questions for 7/10 - Disable the Button 1


#1

Hi. Great advice on these forums. On the "Disable the button 1" page I am confused by what I think are errors on this page that need to be corrected.

1) The Explanation section states "01. If there are 0 or fewer characters remaining, the message is too long." However, the Instructions state: "01. Write an if statement that checks whether charactersLeft is less than 0." These statements conflict. The Explanation should read: "... are less than 0 characters ..." not "0 or fewer." Right?

2) The "Instructions" states: "Write an else if statement that checks whether charactersLeft is equal to 140. If it is, select the 'btn' class and add the class 'disabled' using .addClass()" The Codecademy code in the "1. Preview" shows:

else if(charactersLeft == 140) {
$('.btn').addClass('disabled');
}

but the code that worked for me is:

else if(charactersLeft = 140) {
$('.btn').removeClass('disabled');
}

Once the user has typed 140 characters, shouldn't the Post button still be active, and thus .removeClass('disabled') be used instead of .addClass?

3) In the same code above, the Codecademy code only shows "==" - shouldn't it be "==="?

4) Finally, am I correct in stating that HTML elements are referred to in JQuery without a preceding period? Why do classes sometimes have the preceding period ('.current') and sometimes don't ('current')? I don't understand this.

Thanks!


#2

@nakosar,

point 1

IMHO you statement is correct.

point 2

Using charactersLeft = 140 as condition is a no-no...
You are then doing an assignment instead of a comparison
google search
== the Book ==
javascript operator site:developer.mozilla.org

point 3

the comparison using == , is a so-called comparison-with-type-conversion
'3' == 3 will give a Boolean true

the comparison using === , is a so-called strict comparison
'3' == 3 will give a Boolean false

point 4

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
**$('.article').removeClass('.current')
$(this).addClass('.current')**
into
**$('.article').removeClass('current')
$(this).addClass('current')**

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 .current,
In this .current 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
$(".current") 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 "current"

Reference::

google search
class site:jquery.com
https://api.jquery.com/category/selectors/
http://api.jquery.com/class-selector/
https://api.jquery.com/element-selector/
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
http://www.w3schools.com/jquery/trysel.asp

what is CSS explained site:developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/What_is_CSS


#3

Superb. Thank you @leonhard_wettengmx_n . I'll study your #4 answer and I appreciate those references.