Question

嗨我有一个示例html页面我试图从文本域获取数据无论我做什么我都会收到错误

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

这是我的html页面：

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>

这是抛出错误的行

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

我试过关闭浏览器，刷新输入代码而不是复制粘贴。这可能是系统特定的问题吗？

Answer 1

问题是：

你把

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

之后

document.write();

这将更改文档，因此您无法找到“u1”。

你可以通过删除document.write到脚本的末尾来解决这个问题

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);

}

Answer 2

首先，您需要在body标签之后插入脚本。第二件事 - 将脚本包装成

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

Answer 3

＆＃13;

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;

}

＆＃13;

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

＆＃13;

Firefox返回getElementById（...）为null，即使文本字段已填充并存在

3 个答案: