javascript - 未捕获的TypeError：无法读取null的属性“value”(Uncaught TypeError: Cannot read property 'value' of null)

Question

I'm getting error in this code, I'm trying to do an event where in when the page is load, it will do the event.

(我在这段代码中遇到错误，我正在尝试做一个事件，当页面加载时，它将执行事件。)

But the problem is when I go to other function, but same page, it gets a error of null on that variable.

(但问题是当我转到其他函数，但同一页面时，它会在该变量上出现null错误。)

It has no problem when I execute this codes, but when I'm on other part of my codes this error occurs.

(执行此代码时没有问题，但是当我在代码的其他部分时，会发生此错误。)

Uncaught TypeError: Cannot read property 'value' of 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(); 


 });

  ask by user2901740 translate from so

Answer 1

I am unsure which of them is wrong because you did not provide your HTML, but one of these does not exist:

(我不确定哪一个是错的，因为你没有提供你的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;

There is either no element with the id cal_preview , year , holiday , cal_option , or some combination.

(没有具有id cal_preview ， year ， holiday ， cal_option或某种组合的元素。)

Therefore, JavaScript is unable to read the value of something that does not exist.

(因此，JavaScript无法读取不存在的值的值。)

EDIT :

(编辑 ：)

If you want to check that the element exists first, you could use an if statement for each:

(如果要先检查元素是否存在，可以为每个元素使用if语句：)

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

You could obviously change the else statement if you want or have no else statement at all, but that is all about preference.

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