dongshi3605 2014-11-07 20:37
浏览 152
已采纳

检查null是否为JS typeerror

I am trying to check if fields are blank or not, but it always throws this error:

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

Here is the code: http://pastebin.com/v8mDwG2i

I am using jQuery UI and jQuery. Mine problem is that it always throws null and breaks on that line.

  • 写回答

1条回答 默认 最新

  • dongxun1244 2014-11-08 02:50
    关注

    You get that error because in the JS you check for an ID, but in the HTML you have no id tag supplied, only a name tag.

    I changed the name="..." for every input-element to id="...".

    But there were some other errors in your code as well. Below is a working code snippet with all those error fixed, and an explanation as to what I have changed:

    JS, CSS, HTML:

    $(window).on('load',function(){
  $("#submitBtn").hide();
  $("#logStat").hide();

  $('#preCheckBtn').click(function(){
    $("#logStat").fadeIn(200);
    $("#progBar").progressbar();

    $("#progBar").progressbar("value", 0);
    $("#writeThis").html("Verifying name...");
    if ($("#nameIn").val() == (null||"")) {
      $("#writeThis").html("ERROR: Name is empty.");
      setTimeout(function(){$("#logStat").fadeOut(200);},2000);
      return;
    }

    $("#progBar").progressbar("value", 25);
    $("#writeThis").html("Verifying ID...");
    if ($("#idIn").val()==(null||"") || isNaN($("#idIn").val())) {
      $("#writeThis").html("ERROR: ID is empty or has wrong format.");
      setTimeout(function(){$("#logStat").fadeOut(200);},2000);
      return;
    }

    $("#progBar").progressbar("value", 50);
    $("#writeThis").html("Verifying phone number...");
    if ($("#phoneIn").val()==(null||"") || isNaN($("#phoneIn").val())) {
      $("#writeThis").html("ERROR: Phone Number is empty or has wrong format.");
      setTimeout(function(){$("#logStat").fadeOut(200);},2000);
      return;
    }

    $("#progBar").progressbar("value", 75);
    $("#writeThis").html("Locking data...");
    $("#nameIn").attr("disabled", true);
    $("#idIn").attr("disabled", true);
    $("#phoneIn").attr("disabled", true);

    $("#submitBtn").show();
    $("#progBar").progressbar("value", 100);
    $("#writeThis").html("Done!");
    setTimeout(function(){$("#logStat").fadeOut(200);},1000);
  });
});
    body{
  font-family: sans-serif;
  width: 1020px;
  margin: 25px auto;
}
#logStat{
  margin: auto;
  text-align: center;
  padding: 10px;
  width: 60%;
  border-radius: 5px;
  background-color: #B3B3B3;
}
    <link href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>

<body>
  <form action="data/scripts/submit_form.php" method="post">
    <input type="text" placeholder="Name" id="nameIn" required /><br />
    <input type="text" placeholder="ID" id="idIn" required /><br />
    <input type="text" placeholder="Phone number" id="phoneIn" maxlength="10" required /><br />
    <input type="submit" value="Run PHP" id="submitBtn" />
  </form>
  <button id="preCheckBtn">Pre-check data</button>
  <div id="logStat">
    <div id="progBar"></div>
    <p id="writeThis"></p>
  </div>
</body>

    (fiddle: http://jsfiddle.net/sdbhu7yL/8/)

    • In the second and third if-clause you only check the input-element itself, not it's value. I think you probably just forgot the .value, so I changed it to check the value.
    • In those same if-clauses, isNaN(checkData) gives an error because checkData is never declared, it's undefined. I changed it to isNaN($("#someID").val()) to check the value directly.
    • In all your if-clauses, I changed ==null into ==(null||""). Otherwise, if you click the pre-check-button while one or more of the input fields are still empty, they all get disabled anyway, and you can't fill in the empty fields anymore. (I'm not so sure if disabling them is such a good idea in the first place, because a user might make a mistake filling them in, and then he/she can't correct it anymore.)
    • I put the CSS and JS in separate files. This is good practice: keep different kinds of code separated. (In the code snippet and jsfiddle they are just in separate sub-windows, but on your actual site you need to link to the CSS and JS files - just like you link to the jQuery '.js' and '.css' files.)
    • I removed the loaded() function. The whole idea of jQuery's document.ready and window.load is to replace the normal JavaScript's window.onload.
      What you are doing is this: on page load you call a function loaded() (from inside your HTML body), and inside that function you check for document.ready. That is very redundant.
      Plus, document.ready is called before window.load, so putting document.ready inside the function that is called on load, has no use whatsoever. Actually, the first two .hide() lines weren't even executed; the submitBtn and logStat remained visible, because you checked for document.ready after window.load, but document.ready won't fire anymore because it already happened before window.load.
      (I recommend always using window.load btw, unless there is a specific need for document.ready.)
    • I put window.load around the whole code, not just the first two .hide() lines. This is how window.load should preferably be used.
    • I removed the type="button" from your pre-check-button in HTML. type="button" is only used on input elements to classify it as a button (because there are more input types). If you already use a dedicated <button> element, you don't need the type="button" anymore.
    • I gave the pre-check-button an ID and moved the onclick-binding to jQuery: $('#preCheckBtn').click(function(){ ...});. It is cleaner to have all your JS related code inside the JS file. Read about it here.
    • I translated all your regular JavaScript to jQuery (e.g. document.getElementById("someID").innerHTML = ...; to $('#someID').html(...);.
    • I added $("#submitBtn").show(); at the end, I think you probably just forgot to add it (I'm assuming you want that button to show when all if-clauses are passed).
    • I changed your "ERROR: ID is NULL." messages to a more user friendly text, because that NULL-error message also displays when you type in text (instead of numbers), which makes the message incorrect. (This is more of a design issue of course, feel free to hate me for it.)
    </div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥30 Unity接入微信SDK 无法开启摄像头
  • ¥20 有偿 写代码 要用特定的软件anaconda 里的jvpyter 用python3写
  • ¥20 cad图纸，chx-3六轴码垛机器人
  • ¥15 移动摄像头专网需要解vlan
  • ¥20 access多表提取相同字段数据并合并
  • ¥20 基于MSP430f5529的MPU6050驱动，求出欧拉角
  • ¥20 Java-Oj-桌布的计算
  • ¥15 powerbuilder中的datawindow数据整合到新的DataWindow
  • ¥20 有人知道这种图怎么画吗？
  • ¥15 pyqt6如何引用qrc文件加载里面的的资源