Uncaught TypeError: Не удается прочитать значение свойства 'null

Я получаю ошибку в этом коде, я пытаюсь сделать событие, где, когда страница загружается, он будет делать это событие. Но проблема в том, что когда я перехожу к другой функции, но на той же странице, она получает ошибку null для этой переменной. У меня нет проблем при выполнении этих кодов, но когда я нахожусь на другой части моих кодов, эта ошибка возникает.

Uncaught TypeError: Невозможно прочитать значение свойства '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(); 


 });

Ответ 1

Я не уверен, кто из них ошибается, потому что вы не предоставили свой HTML, но один из них не существует:

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;

Нет ни одного элемента с идентификаторами cal_preview, year, holiday, cal_option или некоторой комбинацией.

Поэтому JavaScript не может прочитать значение чего-то, что не существует.

ИЗМЕНИТЬ

Если вы хотите проверить, что элемент существует первым, вы можете использовать оператор if для каждого:

var str,
element = document.getElementById('cal_preview');
if (element != null) {
    str = element.value;
}
else {
    str = null;
}

Очевидно, вы можете изменить инструкцию else, если хотите, или вообще не имеете никакого выражения, но это все о предпочтении.

Ответ 2

Легче и более лаконично с ||...

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


});

Ответ 3

Добавить чек

if (document.getElementById('cal_preview') != null) {
    str = document.getElementById("cal_preview").value;
}

Ответ 4

Моя ошибка заключалась в том, что я сохранял Javascript файл (тег) над объявлением html.

Он работал, помещая тэг js script в нижней части тела внутри тела. (Я не загружал script на странице страницы.)

Ответ 5

добавить " MainContent _" в значение ID!

Пример: (Ошибка)

document.getElementById("Password").value = text;

(ок!)

document.getElementById("**MainContent_**Password").value = text;