最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Cannot read property 'getElementsByTagName' of null, what is happening? - Stack Overflow

programmeradmin2浏览0评论

My problem seems to lie somewhere in between the subfunction calling of LoadXML. It seems that the xml data bees 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 bees 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>

My problem seems to lie somewhere in between the subfunction calling of LoadXML. It seems that the xml data bees 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 bees 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>
Share Improve this question edited Feb 21, 2017 at 9:20 George 6,7492 gold badges30 silver badges36 bronze badges asked Feb 21, 2017 at 9:07 PnPPnP 1251 gold badge1 silver badge7 bronze badges 5
  • 1 It's just a typo (I'm surprised that you aren't getting an error in the web console, but I don't either): The XML is malformed: <Wil>8</wil> Note that the end tag is wil, not </Wil>. Fix that and it parses and responseXML is filled in. – T.J. Crowder Commented Feb 21, 2017 at 9:12
  • 2 Rather than stumbling around in the dark with a console.log torch, I suggest turning on the lights using the fully-featured debugger built into your browser. Using that, you could look at this in your onreadystatechange handler and see that its responseXML property is null. – T.J. Crowder Commented Feb 21, 2017 at 9:12
  • Like T.J. Crowder wrote it is a type in XML file. Additionally you will get problems on the equal check. xmlDoc.getElementsByTagName("name") is a collection so there will be no .toUpperCase(). You have to do something like that xmlDoc.getElementsByTagName("name")[i].innerHTML.toUpperCase() or shorter x[i].innerHTML.toUpperCase() – Klaus F. Commented Feb 21, 2017 at 9:21
  • In addition to the other ments, given xmlhttp.open("GET", "helper_database.xml", false); which does a synchronous request, there is no need to set up an onreadystatechange event handler at all, you could as well try to process the response after the send() call. In general, you should try to use asynchronous requests by using xmlhttp.open("GET", "helper_database.xml", true), then the onreadystatechange handler at least makes sense. – Martin Honnen Commented Feb 21, 2017 at 9:28
  • I appreciate very much all of these ments and feedback. I did not know that xml tags are case sensitive. – PnP Commented Feb 21, 2017 at 9:38
Add a ment  | 

1 Answer 1

Reset to default 3

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 bees 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>

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论