未捕获的TypeError:无法读取null的属性"value"

Question

我在这段代码中遇到错误,我正在尝试做一个事件,当页面加载时,它将执行事件.但问题是当我转到其他函数,但同一页面时,它会在该变量上出现null错误.执行此代码时没有问题,但是当我在代码的其他部分时,会发生此错误.

未捕获的TypeError:无法读取null的属性"value"

$(document).ready(function(){


      var str = document.getElementById("cal_preview").value;
      var str1 = document.getElementById("year").value;
      var str2 = document.getElementById("holiday").value;
      var str3 = document.getElementById("cal_option").value;


        if (str=="" && str1=="" && str2=="" && str3=="" )
          {
            document.getElementById("calendar_preview").innerHTML="";
              return;
            } 
          if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
          }
          else
          {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }

          xmlhttp.onreadystatechange=function()
          {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
              {
                document.getElementById("calendar_preview").innerHTML=xmlhttp.responseText;
              }
          }

        var url = calendar_preview_vars.plugin_url + "?id=" + str +"&"+"y="+str1+"&"+"h="+str2+"&"+"opt="+str3;
        xmlhttp.open("GET",url,true);
        xmlhttp.send(); 


 });

Answer 1

我不确定哪一个是错的,因为你没有提供你的HTML,但其中一个不存在:

var str = document.getElementById("cal_preview").value;
var str1 = document.getElementById("year").value;
var str2 = document.getElementById("holiday").value;
var str3 = document.getElementById("cal_option").value;

有两种与id的元素cal_preview,year,holiday,cal_option,或某种组合.

因此,JavaScript无法读取不存在的值的值.

编辑:

如果要先检查元素是否存在,可以为每个元素使用if语句:

var str,
element = document.getElementById('cal_preview');
if (element != null) {
    str = element.value;
}
else {
    str = null;
}

如果你想要或根本没有其他声明,你显然可以更改else语句,但这完全取决于首选项.

Answer 2

使用||更简单,更简洁 ...:

$(document).ready(function(){


  var str = ((document.getElementById("cal_preview")||{}).value)||"";
  var str1 = ((document.getElementById("year")||{}).value)||"";
  var str2 = ((document.getElementById("holiday")||{}).value)||"";
  var str3 = ((document.getElementById("cal_option")||{}).value)||"";


    if (str=="" && str1=="" && str2=="" && str3=="" )
      {
        document.getElementById("calendar_preview").innerHTML="";
          return;
        } 
      if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      }
      else
      {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

      xmlhttp.onreadystatechange=function()
      {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
            document.getElementById("calendar_preview").innerHTML=xmlhttp.responseText;
          }
      }

    var url = calendar_preview_vars.plugin_url + "?id=" + str +"&"+"y="+str1+"&"+"h="+str2+"&"+"opt="+str3;
    xmlhttp.open("GET",url,true);
    xmlhttp.send(); 


});

Answer 3

添加支票

if (document.getElementById('cal_preview') != null) {
    str = document.getElementById("cal_preview").value;
}

Answer 4

我的错误是我将 Javascript 文件（标记）保留在 html 声明上方。

它的工作原理是将 js 脚本标签放置在 body 内部的 body 底部。（我没有在页面加载时编写脚本。）