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.
Add a check
if (document.getElementById('cal_preview') != null) {
str = document.getElementById("cal_preview").value;
}
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();