javascript – Uncaught TypeError: Cannot read property value of null

javascript – Uncaught TypeError: Cannot read property value of null

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.

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

javascript – Uncaught TypeError: Cannot read property value of null

My mistake was that I was keeping the Javascript file ( tag) above the html declaration.

It worked by placing the js script tag at the bottom of the body inside the body. (I did not the script on load of the page.)