javascript - 未捕获的类型错误 : Cannot read property 'value' of null

Question

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

Uncaught TypeError: Cannot read property 'value' of null

$(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 语句，您显然可以更改 else 语句，但这完全取决于偏好。