CODEWITHSUNDEEP
javascripthtmldebuggingloggingconsole
compsci45000
compsci45000

Reputation: 379

JavaScript console.log from within a function

<!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.

Upvotes: 0

Views: 2198

Answers (1)

Guffa
Guffa

Reputation: 700720

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.

Upvotes: 2

Related Questions