-1

I am new to jQuery and im trying to create a login form that toggles a text when the user inputs a short username. So here is my code and when i click on the button nothing happens. I checked the console and it says the error on the title over at the particular line in my code.I've checked for possible typos too but i didn't see any. So here is my code : 

<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript" src = "jquery-2.1.1.min.js"></script>
     <script  type="text/javascript">
        var usr = document.getElementById("textbox1").value;//error is over this line.
        if(usr.length<=6){
        $(document).ready(function(){
            $("#press").click(function(){
            $("#warning").toggle();
            });
        });
        }
     </script>
</head>
<body>
    <div id = "middleBlock">
            <form>

                <p id = "username"> Username </p>
                <p id = "password"> Password </p>
                <input type="text" name="user" id="textbox1">
                <input type="password" name="pass" id="textbox2">
                <input type = "button" value = "LOG IN" id = "press">                       
                <p id = "note"> Note: Use the username and password provided by your department. </p>
                <div id = "warning" style = "display:none;padding:3%;">Username too short.</div>
            </form>
        </div>  
</body>
ejandra
  • 145
  • 2
  • 2
  • 12

1 Answers1

6

Move your script to the end of the body or wrap it in a DOM ready function. Your getElementById is executing before the page is rendered, thus throwing a null error.

Example:

$(document).ready(function(){
    var usr = document.getElementById("textbox1").value;//error is over this line.
    if(usr.length<=6){
        $("#press").click(function(){
            $("#warning").toggle();
        });
    }
 });
tymeJV
  • 99,730
  • 13
  • 150
  • 152