javascript - getElementById doesn't find results

I am trying to parse a xml file by the id of all the tags. Here is my xml

    <?xml version="1.0" encoding="UTF-8"?>
    <zones>
    <bedroom id="0">
       <fan id="00">on</fan>
       <tv id="01">off</tv>
    </bedroom>
    <hall id="1">
    <tube id="10">on</tube>
    <bulb id="11">off</bulb>
    <fan id="12">on</fan>
    <tv id="13">on</tv>
    <ac id="14">on</ac>
    </hall>
    <kitchen id="2">
    <freez id="20">on</freez>
    </kitchen>
    <toilet id="3">
        <bulb id="30">on</bulb>
    </toilet>
    <bathroom id="4">
        <heater id="40">on</heater>
    </bathroom>
   </zones>

And here is my code..

     <html>
     <head> <meta http-equiv="refresh" content="1" > </head>
     <body>

      <script type="text/javascript" for="window" event="onload">
       if (window.XMLHttpRequest)
       {// code for IE7+, Firefox, Chrome, Opera, Safari
           xmlhttp=new XMLHttpRequest();
       }
        xmlhttp.open("GET","home.xml",false);
        xmlhttp.send();
        xmlDoc=xmlhttp.responseXML; 

        document.write("<table border='1'>");
        var x=xmlDoc.getElementById("0");
        for (i=0;i<x.length;i++)
        { 
            document.write("<tr><td>");
                document.write("fan");
                document.write("</td><td>");

                document.write(x[i].getElementsByTagName("fan")[0].childNodes[0].nodeValue);
               document.write("<tr><td>");
               document.write("tv");
               document.write("</td><td>");
               document.write(x[i].getElementsByTagName("tv")[0].childNodes[0].nodeValue);
               document.write("</td></tr>");
       }

       var x=xmlDoc.getElementsByTagName("hall");
       for (i=0;i<x.length;i++)
       { 
            document.write("<tr><td>");
                document.write("tube");
                document.write("</td><td>");

                document.write(x[i].getElementsByTagName("tube")  [0].childNodes[0].nodeValue);

                document.write("<tr><td>");
                document.write("bulb");
                document.write("</td><td>");
                document.write(x[i].getElementsByTagName("bulb") [0].childNodes[0].nodeValue);

               document.write("<tr><td>");
               document.write("fan");
               document.write("</td><td>");
               document.write(x[i].getElementsByTagName("fan")[0].childNodes[0].nodeValue);

               document.write("<tr><td>");
               document.write("tv");
               document.write("</td><td>");
               document.write(x[i].getElementsByTagName("tv")[0].childNodes[0].nodeValue);

               document.write("<tr><td>");
               document.write("ac");
               document.write("</td><td>");
               document.write(x[i].getElementsByTagName("ac")[0].childNodes[0].nodeValue);

               document.write("</td></tr>");
         }

         var x=xmlDoc.getElementsByTagName("kitchen");
         for (i=0;i<x.length;i++)
         { 
            document.write("<tr><td>");
                document.write("freez");
                document.write("</td><td>");

                document.write(x[i].getElementsByTagName("freez") [0].childNodes[0].nodeValue);
         }

         var x=xmlDoc.getElementsByTagName("toilet");
         for (i=0;i<x.length;i++)
         { 
            document.write("<tr><td>");
                document.write("bulb");
                document.write("</td><td>");

                document.write(x[i].getElementsByTagName("bulb") [0].childNodes[0].nodeValue);
         }

         var x=xmlDoc.getElementsByTagName("bathroom");
         for (i=0;i<x.length;i++)
         { 
            document.write("<tr><td>");
                document.write("heater");
                document.write("</td><td>");

                document.write(x[i].getElementsByTagName("heater") [0].childNodes[0].nodeValue);
         }

       document.write("</table>");

</script>
</body>
</html>

the problem is that when i implement my code with

var x=xmlDoc.getElementByTagName("bedroom");

everything work fine. But when i change that to

var x=xmlDoc.getElementById("0");

nothing is shown in the browser. So please help me over it, am stuck on this.

I am trying to parse a xml file by the id of all the tags. Here is my xml

    <?xml version="1.0" encoding="UTF-8"?>
    <zones>
    <bedroom id="0">
       <fan id="00">on</fan>
       <tv id="01">off</tv>
    </bedroom>
    <hall id="1">
    <tube id="10">on</tube>
    <bulb id="11">off</bulb>
    <fan id="12">on</fan>
    <tv id="13">on</tv>
    <ac id="14">on</ac>
    </hall>
    <kitchen id="2">
    <freez id="20">on</freez>
    </kitchen>
    <toilet id="3">
        <bulb id="30">on</bulb>
    </toilet>
    <bathroom id="4">
        <heater id="40">on</heater>
    </bathroom>
   </zones>

And here is my code..

     <html>
     <head> <meta http-equiv="refresh" content="1" > </head>
     <body>

      <script type="text/javascript" for="window" event="onload">
       if (window.XMLHttpRequest)
       {// code for IE7+, Firefox, Chrome, Opera, Safari
           xmlhttp=new XMLHttpRequest();
       }
        xmlhttp.open("GET","home.xml",false);
        xmlhttp.send();
        xmlDoc=xmlhttp.responseXML; 

        document.write("<table border='1'>");
        var x=xmlDoc.getElementById("0");
        for (i=0;i<x.length;i++)
        { 
            document.write("<tr><td>");
                document.write("fan");
                document.write("</td><td>");

                document.write(x[i].getElementsByTagName("fan")[0].childNodes[0].nodeValue);
               document.write("<tr><td>");
               document.write("tv");
               document.write("</td><td>");
               document.write(x[i].getElementsByTagName("tv")[0].childNodes[0].nodeValue);
               document.write("</td></tr>");
       }

       var x=xmlDoc.getElementsByTagName("hall");
       for (i=0;i<x.length;i++)
       { 
            document.write("<tr><td>");
                document.write("tube");
                document.write("</td><td>");

                document.write(x[i].getElementsByTagName("tube")  [0].childNodes[0].nodeValue);

                document.write("<tr><td>");
                document.write("bulb");
                document.write("</td><td>");
                document.write(x[i].getElementsByTagName("bulb") [0].childNodes[0].nodeValue);

               document.write("<tr><td>");
               document.write("fan");
               document.write("</td><td>");
               document.write(x[i].getElementsByTagName("fan")[0].childNodes[0].nodeValue);

               document.write("<tr><td>");
               document.write("tv");
               document.write("</td><td>");
               document.write(x[i].getElementsByTagName("tv")[0].childNodes[0].nodeValue);

               document.write("<tr><td>");
               document.write("ac");
               document.write("</td><td>");
               document.write(x[i].getElementsByTagName("ac")[0].childNodes[0].nodeValue);

               document.write("</td></tr>");
         }

         var x=xmlDoc.getElementsByTagName("kitchen");
         for (i=0;i<x.length;i++)
         { 
            document.write("<tr><td>");
                document.write("freez");
                document.write("</td><td>");

                document.write(x[i].getElementsByTagName("freez") [0].childNodes[0].nodeValue);
         }

         var x=xmlDoc.getElementsByTagName("toilet");
         for (i=0;i<x.length;i++)
         { 
            document.write("<tr><td>");
                document.write("bulb");
                document.write("</td><td>");

                document.write(x[i].getElementsByTagName("bulb") [0].childNodes[0].nodeValue);
         }

         var x=xmlDoc.getElementsByTagName("bathroom");
         for (i=0;i<x.length;i++)
         { 
            document.write("<tr><td>");
                document.write("heater");
                document.write("</td><td>");

                document.write(x[i].getElementsByTagName("heater") [0].childNodes[0].nodeValue);
         }

       document.write("</table>");

</script>
</body>
</html>

the problem is that when i implement my code with

var x=xmlDoc.getElementByTagName("bedroom");

everything work fine. But when i change that to

var x=xmlDoc.getElementById("0");

nothing is shown in the browser. So please help me over it, am stuck on this.

Share Improve this question edited Apr 9, 2012 at 10:33 asked Apr 9, 2012 at 10:05 AMUL 2911 gold badge4 silver badges18 bronze badges

8 This much use of document.write should be considered a criminal act. – Jon Commented Apr 9, 2012 at 10:07
The title is confusing. You probably mean javascript's getElementById. – T. Junghans Commented Apr 9, 2012 at 10:08
3 Did you use the correct spelling getElementById() instead of getElementsById()? – Nico Schertler Commented Apr 9, 2012 at 10:08
@TJ. - It actually has one. But this question is not even related to PHP. – Álvaro González Commented Apr 9, 2012 at 10:09
@ÁlvaroG.Vicario : Thanks, I've changed my ment. – T. Junghans Commented Apr 9, 2012 at 10:11

| Show 3 more ments

5 Answers 5

Sorted by: Reset to default 4

getElementById returns an element which has an attribute that is of type "ID", not an attribute whose name is "ID". Without a DTD to go with your XML file, you have no attributes with the defined type, so getElementById will always return null. http://reference.sitepoint./javascript/Document/getElementById

W3Schools does a pretty good job of explaining how to use a DTD. http://www.w3schools./dtd/default.asp

I would suggest that if you go this route that you consider using a more generic name for your XML elements and use an attribute to describe what room or applicance that element is referrring to (for example, instead of <bedroom id="0"> use <zone room="bedroom" id="0"> or instead of <fan id="00"> use <appliance name="fan" id="00">), otherwise your DTD will be larger and harder to maintain than it really needs to be.

It looks like you have three errors:

On line 15, you are using:
```
var x=xmlDoc.getElementsById("0");
```
It should be:
```
var x=xmlDoc.getElementById("0");
```
If you haven't spotted the difference:

You are using getElementsById

When you should be using getElementById()

Here is MDN documentation for getElementById()
Is the file on your puter, or is it on a server (including home servers (XAMPP, easyPHP etc.))

XMLHttpRequest() will only work if it is on a HTTP server.

I get these errors:

You can install one of these:
- XAMPP
- easyPHP
- Apache Server
I remend using XAMPP or easyPHP because they are a lot more easy to setup.

Then put your XML and HTML files in your htdocs folder.

Finally, go to your server and navigate to your HTML file.

It works on mine:

Output on the HTML file:
You will need a DTD in the file to make it work in some browsers or you can change your id attributes to xml:id. It will work in most (maybe all) modern browsers.

UPDATE: The OP has changed the code from getElementsById() to getElementById().

Please use getElementById

Not getElementsById

var x=xmlDoc.getElementsById("0")

It should be

var x=xmlDoc.getElementById("0")

not getElementsbyId

var x=xmlDoc.getElementById("0");

the Alphabet character is very important

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - getElementById doesn't find results - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)