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. 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

$(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

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

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.

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

EDIT:

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

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.

Answer 2

Easier and more succinct with ||:

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