Search code examples
javascriptxmlxmlhttprequest

Cannot read property 'getElementsByTagName' of null, what is happening?


My problem seems to lie somewhere in between the subfunction calling of LoadXML. It seems that the xml data becomes null for some weird reason, and I have no idea how to fix that. Stackexchange seemed to have loads of similar questions but many were unanswered or the answer they had did not help my case.

function load() {
    var xmlhttp;
    xmlhttp = new XMLHttpRequest();
    var idname = document.getElementById("name").value;
    xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this); //it obtains it here...
            LoadXML(this, idname);
        }
    };
    xmlhttp.open("GET", "helper_database.xml", false);
    xmlhttp.overrideMimeType('text/xml');
    xmlhttp.send();
}

function LoadXML(xml, name) {
    var x, i, xmlDoc, nametxt, areEqual;
    xmlDoc = xml.responseXML;
    nametxt = name;
    console.log("HERE \n" + xmlDoc); //...but it becomes null.
    x = xmlDoc.getElementsByTagName("name"); //this returns the error of "Cannot read property 'getElementsByTagName' of null"
    console.log("muuttujan x eka: " + x[0]);
    for (i = 0; i < x.length; i++) {
        if (areEqual = xmlDoc.getElementsByTagName("name").toUpperCase() === nametxt.toUpperCase()) {
            document.getElementById("ComFocus").value = x[i];
        }
    }
}

Here is the helper_database.xml

<Character>
    <name>test</name>
    <stats>
        <Com>1</Com>
        <Con>2</Con>
        <Cun>3</Cun>
        <Dex>4</Dex>
        <Mag>5</Mag>
        <Per>6</Per>
        <Str>7</Str>
        <Wil>8</wil>
    </stats>
</Character>

Solution

  • You have some typeo as well as some parsing errors.
    Note that :

    • getElementsByTagName().toUpperCase is invalid because gEBTN returns array of objects. so, you have to use getElementsByTagName()[i].innerHTML.toUpperCase().
    • instead of using console.log("muuttujan x eka: " + x[0]);, use console.log("muuttujan x eka: " + x[0].innerHTML);

    function load() {
      var xmlhttp;
      xmlhttp = new XMLHttpRequest();
      var idname = document.getElementById("name").value;
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          console.log(xmlhttp); //it obtains it here...
          LoadXML(xmlhttp, idname);
        }
      };
      xmlhttp.open("GET", "helper_database.xml", false);
      //xmlhttp.overrideMimeType('text/xml');
      xmlhttp.send();
    }
    
    function LoadXML(xml, name) {
      var x, i, xmlDoc, nametxt, areEqual;
      xmlDoc = xml.responseXML;
      nametxt = name;
      console.log("HERE \n" + xmlDoc); //...but it becomes null.
      x = xmlDoc.getElementsByTagName("name"); //this returns the error of "Cannot read property 'getElementsByTagName' of null"
      console.log("muuttujan x eka: " + x[0].innerHTML);
      for (i = 0; i < x.length; i++) {
        if (areEqual = xmlDoc.getElementsByTagName("name")[0].innerHTML.toUpperCase() === nametxt.toUpperCase()) {
          document.getElementById("ComFocus").value = x[i];
        }
      }
    }
    <html>
      <body>
        <input id="name" onblur="load();" />
        <div id="ComFocus"></div>
      </body>
    </html>

    XML

    <?xml version="1.0" encoding="UTF-8"?>
    <Character><name>test</name>
    <stats>
    <Com>1</Com>
    <Con>2</Con>
    <Cun>3</Cun>
    <Dex>4</Dex>
    <Mag>5</Mag>
    <Per>6</Per>
    <Str>7</Str>
    <Wil>8</Wil>
    </stats></Character>