S. Andersson S. Andersson - 3 months ago 8x
jQuery Question

ERROR in jQuery for some reason and I can't figure out why

Could someone take a look? I believe there is something wrong with the jquery source code but I can't come to a more specific explanation than that.



//Hide hints
$("form span").css("display", "none");

//create som variables to make the code easier to follow
var $password = $("#password");
var $confirmPassword = $("#confirmPassword");

//when focusing (clicking) on the password text input, show the
//hints until the length of the input reaches 8.

//specifies whether the password specified is long enough
function passwordIEnough() {
return $(this).val().length > 8;

//specifies if the password and confirm password boxes are equal
function passwordsAreEqual() {
return $password.val() === $confirmPassword.val();

function passwordEvent() {
if ( passwordIsEnough() ) {
$(this).next().css("display", "none");
} else {
$(this).next().css("display", "inline-block");

function confirmPasswordEvent() {
if ( passwordsAreEqual() ) {
$(this).next().css("display", "none");
} else {
$(this).next().css("display", "inline-block");


<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" charset="utf-8">

<form action="#" method="post">
<h2>Professional Form</h2>
<label for="username">Username</label>
<input type="text" id="uname" name="username">

<label for="password">Password</label>
<input type="password" id="password" name="password">
<!-- <div class="arrow-left"></div> -->
<span>Atleast 8 characters</span>

<label for="confirmPassword">Confirm Password</label>
<input type="password" id="confirmPassword" name="confirmPassword">
<!-- <div class="arrow-left"></div> -->
<span>Please confirm your password</span>

<input type="submit" value="Submit" id="submit">

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>



What the console says:

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined


The problem is that "this" in your case is a reference to the window, not to the textbox as you are expecting. $(this) will only work inside of a bound event handler. Try using a different method of gaining access to your textbox like $("#password").val(), or use $("#password").focus(function(){}) for your logic.