title: Uncaught TypeError: Cannot read property 'value' of null
body: <p>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. <br><br></p>
  
  <p>Uncaught TypeError: Cannot read property 'value' of null  </p>
  
  <pre><code>$(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=="" &amp;&amp; str1=="" &amp;&amp; str2=="" &amp;&amp; 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 &amp;&amp; xmlhttp.status==200)
                {
                  document.getElementById("calendar_preview").innerHTML=xmlhttp.responseText;
                }
            }
  
          var url = calendar_preview_vars.plugin_url + "?id=" + str +"&amp;"+"y="+str1+"&amp;"+"h="+str2+"&amp;"+"opt="+str3;
          xmlhttp.open("GET",url,true);
          xmlhttp.send(); 
  
  
   });
  </code></pre>