JavaScript console.log from within a function

Question

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="login.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script src="jquery.serializeJSON.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#submit-button").click(function(e)
{
  var username = JSON.serialize($('#username').val().toLowerCase());
  console.log($('#username').val());


});
});
</script>
<div class="login-container">
  <div class="title">Login Form</div>
  <div class="form-fields">
  <form name="login-form" id="login-form" method="POST">
    <input type="text" name="username" placeholder="Username" required></input>
    <input type="password" name="password" placeholder="Password" required></input>
    <input type="submit" value="Log in" id="submit-button"></input>
  </form>
</div>

I am trying to log the username variable after serializing it but console.log is not printing anything from within the function. What is the best way to debug in this type of situation.

one reason for not printing is that code never gets to console.log line and it errors out before it. Did you try to console.log before the username field evaluation to see if the submit button event fires? — rfolt
– rfolt, Commented Oct 27, 2014 at 20:22
method serializeJSON seems suspicious, strings in js don't have method with this name — Roman Pominov
– Roman Pominov, Commented Oct 27, 2014 at 20:23
add 'Debugger;' to the .click function to see if it is getting in the method. — Zac
– Zac, Commented Oct 27, 2014 at 20:23
toLowerCaser() should be toLowerCase(), and serializeJSON() should be used on a DOM element, not on a string. — blex
– blex, Commented Oct 27, 2014 at 20:26

Guffa · Accepted Answer · 2014-10-27 21:37:43Z

2

The method to convert the string to lower case is toLowerCase, not toLowerCaser, and there is no serializeJSON method on a string. You would use the JSON.serialize method:

var username = JSON.serialize($('#username').val().toLowerCase());

To find an error like that you should look in the error log in the browser, it should show you an error message saying that toLowerCaser is not a function. That should tell you that perhaps that's not what the method is called and look it up in the documentation (for example https://developer.mozilla.org/en-US/). When you fixed that you would get the same error for serializeJSON.

To use console.log to debug, you can split up the steps and progressively check the result. For example:

// check if jQuery found anything
console.log($('#username').length);
// check what the text is
console.log($('#username').val());
// check if toLowerCaser works
console.log($('#username').val().toLowerCaser());
// check if serializeJSON works
console.log($('#username').val().toLowerCaser().serializeJSON());

Edit:

When you have shown the HTML code also, I see that it doesn't contain any element with id="username", so $('#username') will be an empty jQuery object.

If you try console.log($('#username').length); you will see that it writes out 0.

edited Oct 27, 2014 at 21:37

answered Oct 27, 2014 at 20:28

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

compsci45000 Over a year ago

that make more sense but even when i just write console.log ("test); from within the function i still don't see any log. Only when i do it above the fucntion does it work. Ill update my code to show all the HTML as well.

Guffa Over a year ago

@user3413252: If you test the first console.log test from above, you will see that it will write out 0. There is no element with id="username" in the page, so the jQuery object will be empty. When you use val() on it, it will return null, and you can't use toLowerCase on a null reference so you will get an error there. When you get an error the exection will stop, so the next line that writes to the log will not be executed.

compsci45000 Over a year ago

am i supposed to see these errors in the console somewhere or are they not shown? Because when i run the program i see nothing in my console.

Guffa Over a year ago

@user3413252: Yes, they should show up in the console, the same place where you see console.log messages.

compsci45000 Over a year ago

I'm getting this error on the line you wrote above:

|

Collectives™ on Stack Overflow

JavaScript console.log from within a function

1 Answer 1

Edit:

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit:

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related