Firefox returns getElementById(...) is null even though the text field is populated and exists

Question

Hi I have a a sample html page im trying to get the data from a text feild no matter what i do i get the error

TypeError: document.getElementById(...) is null

Here is my html page:

function verify() {
  var error = "Hi, ";
  var no = document.getElementById("num").value;
  var x = parseInt(no);
  if (x < 10000000 || x > 99999999999) {
    error = error + "Mobile Number is invalid";
  }
  document.write(error);
  var username = document.getElementById("u1").value;
  document.write(username);

}

<!DOCTYPE html>
<html>

<head>
  <title> Sign In</title>
  <link rel="stylesheet" href="veri.css">

</head>
<script src="veri.js">
</script>

<body>
  <form>
    <table id="frm">
      <tr>
        <th class="rightpad">Name</th>
        <th><input type="text" name="name" id="name" required></th>
      </tr>
      <tr>
        <th class="rightpad">Gender</th>
        <th>
          <input type="radio" name="gender" value="male" checked> Male<br>
          <t><input type="radio" name="gender" value="female"> Female<br>
            <input type="radio" name="gender" value="other"> Other
        </th>

      </tr>
      <tr>
        <th class="rightpad"> Mobile no</th>
        <th><input id="num" type="number" name="num" required>
      </tr>
      <tr>
        <th class="rightpad"> Email</th>
        <th><input type="email" name="email" required>
      </tr>
      <tr>
        <th class="rightpad">Username</th>
        <th><input type="text" id="u1" name="u1" required></th>
      </tr>
      <tr>
        <th class="rightpad">Password</th>
        <th><input type="password" name="pass" required></th>
      </tr>
      <tr>
        <th>
        </th>
        <th id="but"><button onclick="verify()" type="button">Verify</button></th>
      </tr>
    </table>
  </form>


</body>

</html>

This is the line that throws the error

var username=document.getElementById("u1").value;

I have tried closing the browser, refreshing typing the code and not copy pasting.Could this be a system specific problem?

Your script is loaded before your DOM. Just put your script at the end of your body — Alexis, Feb 05 '18 at 08:59
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — pwolaq, Feb 05 '18 at 09:20
@Alexis it's on button click. I also thought it without a click. so order doesnt matter here — Royi Namir, Feb 05 '18 at 11:50

score 1 · Answer 1 · answered Feb 05 '18 at 09:10

1

the problem is that:

you put

var username=document.getElementById("u1").value;

after

document.write();

this will change the document,so you can't find "u1".

you can fix that by remove the document.write to the end of the script

function verify() {
    var error = "Hi, ";
    var no = document.getElementById("num").value;
    var x = parseInt(no);
    if (x < 10000000 || x > 99999999999) {
        error = error + "Mobile Number is invalid";
    }
    var username = document.getElementById("u1").value;
    document.write(error);

}

answered Feb 05 '18 at 09:10

xianshenglu

4,009
1
10
25

Thanks This Fixed My problem! – Arun Mani Feb 05 '18 at 09:14
@ArunMani before testing,i thought like others.After testing,i find your problem. – xianshenglu Feb 05 '18 at 09:15

score 0 · Answer 2 · answered Feb 05 '18 at 09:05

0

First of all, you need to plug scripts after the body tag. The second thing - wrap you script into

window.addEventListener("load", function() {
   //your script here
});

answered Feb 05 '18 at 09:05

Artem Tarasov

93
7

score -1 · Answer 3 · answered Feb 05 '18 at 09:06

function verify() {
  var error = "Hi, ";
  var no = document.getElementById("num").value;
  var x = parseInt(no);
  if (x < 10000000 || x > 99999999999) {
    error = error + "Mobile Number is invalid";
  }
  document.write(error);
  var username = document.getElementById("u1").value;

}

<!DOCTYPE html>
<html>

<head>
  <title> Sign In</title>
  <link rel="stylesheet" href="veri.css">

</head>
<body>
  <form>
    <table id="frm">
      <tr>
        <th class="rightpad">Name</th>
        <th><input type="text" name="name" id="name" required></th>
      </tr>
      <tr>
        <th class="rightpad">Gender</th>
        <th>
          <input type="radio" name="gender" value="male" checked> Male<br>
          <t><input type="radio" name="gender" value="female"> Female<br>
            <input type="radio" name="gender" value="other"> Other
        </th>

      </tr>
      <tr>
        <th class="rightpad"> Mobile no</th>
        <th><input id="num" type="number" name="num" required>
      </tr>
      <tr>
        <th class="rightpad"> Email</th>
        <th><input type="email" name="email" required>
      </tr>
      <tr>
        <th class="rightpad">Username</th>
        <th><input type="text" id="u1" name="u1" required></th>
      </tr>
      <tr>
        <th class="rightpad">Password</th>
        <th><input type="password" name="pass" required></th>
      </tr>
      <tr>
        <th>
        </th>
        <th id="but"><button onclick="verify()" type="button">Verify</button></th>
      </tr>
    </table>
  </form>


</body>
<script src="veri.js"> </script>
</html>

Firefox returns getElementById(...) is null even though the text field is populated and exists

3 Answers3