If in your HTML you have an input element with a name or id with a _ like e.g. first_name or more than one _ like e.g. student_first_name and you also have the Javascript code at the bottom of your Web Page and you are sure you are doing everything else right, then those dashes could be what is messing you up.
Having id or name for your input elements resembling the below
<input type="text" id="first_name" name="first_name">
or
<input type="text" id="student_first_name" name="student_first_name">
Then you try make a call like this below in your JavaScript code
var first_name = document.getElementById("first_name").value;
or
var student_first_name = document.getElementById("student_first_name").value;
You are certainly going to have an error like Uncaught TypeError: Cannot read property 'value' of null in Google Chrome and on Internet Explorer too. I did not get to test that with Firefox.
In my case I removed the dashes, in first_name and renamed it to firstname and from student_first_name to studentfirstname
At the end, I was able to resolve that error with my code now looking as follows for HTML and JavaScript.
HTML
<input type="text" id="firstname" name="firstname">
or
<input type="text" id="studentfirstname" name="studentfirstname">
Javascript
var firstname = document.getElementById("firstname").value;
or
var studentfirstname = document.getElementById("studentfirstname").value;
So if it is within your means to rename the HTML and JavaScript code with those dashes, it may help if that is what is ailing your piece of code. In my case that was what was bugging me.
Hope this helps someone stop pulling their hair like I was.