Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript jQuery Basics (2014) Creating a Password Confirmation Form Perform: Part 2

Global variables

Hi ! I have a few issues with this exercice. Can you help me ?

  1. I don't understand what is wrong in my code, is the way i declare my global variables, not valid ?

  2. This is more a semantic question : In the video, the teacher is using a dollar sign in his variable, shouldn't the dollar sign be used in the variable to declare new objects that don't exist in the DOM yet ?

There is my code.

$("form span").hide();
var password = $("#password").val();
var confirm = $("#confirm_password").val();

function passwordEvent(){ 
  if(password.length > 8) {
    $(this).next().hide();
  }
  else {
    $(this).next().show();
  }
}

function confirmPasswordEvent() {
  if (confirm === password){
     $(this).next().hide();
  }
  else {
    $(this).next().show();
  }
}

$("#password").focus(passwordEvent).keyup(passwordEvent);
$("#confirm_password").focus(confirmPasswordEvent).keyup(confirmPasswordEvent);

3 Answers

You are not reading the values of DOM nodes dynamically or at run time (i.e. as user keys them), rather your global variables contain the values of "password" and "confirm_password" fields at the time of initial run of the script (which would be empty). The next() method does retrieves the element from the DOM as "this" refers to the DOM node on which the event was raised in this context.

Ok, it confirms my thinking. Thanks

As mentioned in the exercise description, you just have to change line 51 as below and don't have to change any of the remaining code:

$confirmPassword.focus(confirmPasswordEvent).keyup(confirmPasswordEvent).keyup(enableSubmitEvent);

Well I was still trying to make it work only on focus and keyup behaviors. But i think i understand what is the problem :

I defined the global variables values as input values. So when the code below is running , the next method will not get any element. Am i right ?

function passwordEvent(){ 
  if(password.length > 8) {
    $(this).next().hide();
  }
  else {
    $(this).next().show();
  }
}

So i need to change my variables only to store the inputs and use the "val" method inside my functions.

$("form span").hide();
var password = $("#password");
var confirm = $("#confirm_password");

function passwordEvent(){ 
  if(password.val().length > 8) {
    $(this).next().hide();
  }
  else {
    $(this).next().show();
  }
}

function confirmPasswordEvent() {
  if (confirm.val() === password.val()){
     $(confirm).next().hide();
  }
  else {
    $(confirm).next().show();
  }
}

password.focus(passwordEvent).keyup(passwordEvent).focus(confirmPasswordEvent).keyup(confirmPasswordEvent);

confirm.focus(confirmPasswordEvent).keyup(confirmPasswordEvent);

Now $(this) is equal to the input and $(this).next() will get the next element, the span.

Tough, i'm still wondering when should we use the "$" sign in a variable, i tought it was when creating new objects ?

Nataly Diem
Nataly Diem
9,701 Points

Hi there Axel! We use $ sign in a variable when we want to indicate that is a jQuery object, this way they are easily indentified.

Aurelian Spodarec
Aurelian Spodarec
10,789 Points

but we don't have too, it's just a conventions programmers use