jQuery unknown error

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

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 Likes

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

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

2 Likes