未捕获的类型错误：无法读取 null 的属性“值”

IT技术 javascript
2021-02-06 01:28:29

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

未捕获的类型错误：无法读取 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(); 


 });
6个回答

我不确定其中哪一个是错误的，因为您没有提供 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 语句，但这完全是关于偏好的。

只需简单地执行与之前完全相同的操作即可。此外，如果您愿意，如果其中一个不存在，您可以跳过所有内容。
2021-03-16 01:28:29
我想检查它们是否都存在，如果不存在则跳过该过程。
2021-03-17 01:28:29
我认为您明白我的意思，我试图在那里进行验证，例如 if null，但没有奏效。是否可以验证值是否存在？我理解正确吗？
2021-03-22 01:28:29
您只想检查它是否存在，如果不存在则什么都不做，或者试图找出它认为不存在的那个？
2021-04-04 01:28:29
现在的错误是在这部分 document.getElementById("calendar_preview").innerHTML=xmlhttp.responseText;,。无法设置 null 的属性innerhtml
2021-04-11 01:28:29

更简单，更简洁||：

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

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

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

添加支票 

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

您可以添加 TimeOut 来验证对象，而不是使用 document 或 $(document) 来避免 JQuery。TimeOut 在加载页面内的所有对象和其他事件后执行...

setTimeout(function () { 

var str = document.getElementById("cal_preview").value;
var str1 = document.getElementById("year").value;
....
....
....

}, 0);
其它你可能感兴趣的问题
上一篇如何使用 jQuery 停止默认链接点击行为 下一篇React 中的 Jquery 未定义