Uncaught TypeError Cannot read property value of null

Question

I have been getting an ERROR in the code as I'm trying to do an event where when the page is loaded, it will do the event. But the problem is when I go to another function, but on the same page, I get an error of null on that variable. It has no problem when I execute this code, but when I'm on other parts of my code 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

As you have not shared your HTML code, I am unsure as to which of them is wrong, 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. However, 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 this will vary with preference.