jQuery unknown error


#1
<!DOCTYPE html>
<html>
<head>
  <title>Alive Time</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="code.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
</head>
  <body>
    <div class="container-fluid text-center" id="head">
      <h1>Whats my alive time</h1>	
    </div>
    <div class="container text-center" id="enter">
      <div class="row" style="display: flex; justify-content: center;"> 
        <h3 style="display: inline-block; margin-right: 0.5em; ">Enter your birth date:</h3>
        <input type="text" class="form-control col-3" placeholder="mm/dd/yyyy"></input>
        <button type="submit" class="btn btn-primary col-1">GO</button>
      </div>
    </div>

   <!-- <p id="invalid" class="hid"></p>-->

  </body>

</html>
-------------------------------------------------------------------------------------------------------------------------------------
CSS:
#head{
	margin: 10em 0;

}


button{
	margin-left: 1em;
}

.hid{
	display: none;
}
----------------------------------------------------------------------------------------------------------------
$(document).ready(function(){


    $("input").focus(function(){//whenever user focus at input placeholder value should be mm/dd/yyyy
		$("input").attr("placeholder","mm/dd/yyyy");
    });

	
   $("button").on("click",function(){ //on click function on button GO
        
    var $inp=$("input").val();//getting the value of input field
    var regex= /(\d{1,2})\/(\d{1,2})\/(\d{4})/gi;//regular expression for date format
    if(regex.test($inp)===false){//if format is not followed input is invalid
             $("input").attr("placeholder","Please write valid input").val("");
    	//$("#invalid").removeClass('hid').text("Please write valid input");
        }
      var arr=regex.exec($inp);//making array of input field value.['12/13/1995','12','13','1995']
      var numarr=[];
      for(var i=1;i<arr.length;i++){//loop to convert string into numbers
          var n=Number(arr[i]);//converting into numbers

          if(i===1&&n>12||i===2&&n>31){//if month or day value is invalid e.g day is 32 or month is 13
          	$("input").attr("placeholder","Please write valid input").val("");
          }
          else{
          	numarr.push(n);//if valid push that number into numarr. 
          }

          
      }

  });



})

Guys I am trying to make a small and simple web app to calculate person’s age. If I compile my program it gives an error of “cant read length property of null”.I dont know why it is having arr as null. I tried to check my arr and run it in chrome developers tool and it is giving desired results. For example if we include 12/13/1995 in input arr should be of length 4. But it is giving null error if I check console of developer tools… I couldnt figure out the problem please can anyone help me here.


#2

Without seeing your JS we are just as stumped as you. The above line looks to be out of place, perhaps that is a contributing factor. Load your code.js last in the sequence. If it has a ready event listener then it can stay in the head, but if not, it should go at the end of the body.


#3

var regex= /(\d{1,2})\/(\d{1,2})\/(\d{4})/gi;

you don’t need g (Global search) here.