Uncaught TypeError: kan eigenschap ‘waarde’ van null niet lezen

Ik krijg een foutmelding in deze code, ik probeer een gebeurtenis te doen waarbij wanneer de pagina wordt geladen, deze de gebeurtenis zal doen. Maar het probleem is dat wanneer ik naar een andere functie ga, maar naar dezelfde pagina, de fout null op die variabele wordt weergegeven. Het heeft geen probleem wanneer ik deze codes uitvoer, maar wanneer ik op een ander deel van mijn codes ben, treedt deze fout op.

Uncaught TypeError: kan eigenschap ‘waarde’ van null niet lezen

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

Antwoord 1, autoriteit 100%

Ik weet niet zeker welke fout is, omdat je je HTML niet hebt opgegeven, maar een van deze bestaat niet:

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;

Er is ofwel geen element met de id cal_preview, year, holiday, cal_option, of een combinatie .

Daarom kan JavaScript de waarde niet lezen van iets dat niet bestaat.

BEWERKEN:

Als u eerst wilt controleren of het element bestaat, kunt u voor elk een if-statement gebruiken:

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

Je zou natuurlijk de else-statement kunnen veranderen als je wilt of helemaal geen else-statement hebt, maar dat is allemaal een kwestie van voorkeur.


Antwoord 2, autoriteit 18%

Makkelijker en beknopter met ||:

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

Antwoord 3, autoriteit 7%

Mijn fout was dat ik het Javascript-bestand (tag) boven de html-declaratie hield.

Het werkte door de js-scripttag onderaan de body in de body te plaatsen. (Ik heb het script niet gebruikt bij het laden van de pagina.)


Antwoord 4, autoriteit 7%

Voeg een vinkje toe

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

Antwoord 5, autoriteit 3%

In plaats van document of $(document) om JQuery te vermijden, kunt u een TimeOut toevoegen om de objecten te valideren. TimeOut wordt uitgevoerd na het laden van alle objecten op de pagina en andere gebeurtenissen…

setTimeout(function () { 
var str = document.getElementById("cal_preview").value;
var str1 = document.getElementById("year").value;
....
....
....
}, 0);

Antwoord 6

voeg “MainContent_” toe aan ID-waarde!

Voorbeeld:
(Fout)

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

(oké!)

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

Antwoord 7

HTML: geef het hele lichaam door met klikken

div class="calculate" id="calculate">
            <div class="button" id="button" onclick="myCode(this.body)"> CALCULATE ! </div>
        </div>

Schrijf vervolgens de JavaScript-code in de functie “myCode()”

function myCode()
{
    var bill = document.getElementById("currency").value ;
    var people_count = document.getElementById("number1").value;
    var select_value = document.getElementById("select").value;
    var calculate = document.getElementById("calculate");
    calculate.addEventListener("click" ,function()
    {
        console.log(bill);
        console.log(people_count);
        console.log(select_value);
    });
}

je krijgt je waarden
Ik gebruik de visuele studio-code-editor


Antwoord 8

Als je in je HTML een invoerelement hebt met een naam of id met een _ zoals b.v. first_name of meer dan één _ zoals b.v. student_first_name en je hebt ook de Javascript-code onderaan je webpagina en je weet zeker dat je al het andere goed doet, dan kunnen die streepjes je in de war brengen.

Met id of naam voor uw invoerelementen die lijken op de onderstaande

<input type="text" id="first_name" name="first_name">

of

<input type="text" id="student_first_name" name="student_first_name">

Vervolgens probeer je een oproep te doen zoals hieronder in je JavaScript-code

var first_name = document.getElementById("first_name").value;

of

var student_first_name = document.getElementById("student_first_name").value;

Je krijgt zeker een foutmelding zoals Uncaught TypeError: Can not read property ‘value’ of null in Google Chrome en op Internet Explorer ook. Ik heb dat niet kunnen testen met Firefox.

In mijn geval heb ik de streepjes verwijderd in first_name en hernoemd naar firstname en van student_first_name naar studentfirstname

Uiteindelijk kon ik die fout oplossen doordat mijn code er nu als volgt uitziet voor HTML en JavaScript.

HTML

<input type="text" id="firstname" name="firstname">

of

<input type="text" id="studentfirstname" name="studentfirstname">

Javascript

var firstname = document.getElementById("firstname").value;

of

var studentfirstname = document.getElementById("studentfirstname").value;

Dus als het binnen je mogelijkheden ligt om de HTML– en JavaScript-code te hernoemen met die streepjes, kan het helpen als dat is wat je stukje code mankeert. In mijn geval was dat wat mij dwarszat.

Ik hoop dat dit iemand helpt om te stoppen met trekken aan hun haar zoals ik deed.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

11 + 15 =

Other episodes