-1

loadXMLDoc（）JavaScript関数を使用してXMLドキュメントからデータをロードし、ボタンがクリックされたときにページのDIVに表示しようとしています。これまでのところ、DIVにコンテンツを取得できません。特定のタグ名内のすべての要素をロードしたいと思います。

XMLは次のとおりです。

<?xml version="1.0" encoding="UTF-8"?>
<Fruits>
  <Cell>Apples</Cell>
  <Cell>Bananas</Cell>
  <Cell>Strawberries</Cell>
</Fruits>
<Vegetables>
  <Cell>Lettuce</Cell>
   <Cell>Tomatoes</Cell>
  <Cell>Carrots</Cell> 
</Vegetables>

JavaScriptは次のとおりです。

function fruits()  
{
    var  
    xmlhttp;  
    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)  
        {  
            xmlDoc = xmlhttp.responseXML;
            document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("fruits"); 
        }  
        xmlhttp.open("GET","document.xml", true);  
        xmlhttp.send();  
    }

    function vegetables()  
    {
        var  
        xmlhttp;  
        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)  
        {  
            xmlDoc = xmlhttp.responseXML;
            document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("vegetables"); 
        }  
        xmlhttp.open("GET","document.xml", true);  
        xmlhttp.send();  
    }

そしてここにHTMLがあります：

<button type="button" onclick="fruits()">Fruits</button>
<button type="button" onclick="vegetables()">Vegetables</button>
<div id="food">Please select your favorite</div>
4

1 に答える 1

1

あなたの関数fruits()は適切に閉じられておらず、あなたの関数vegetables()は function の中に入っていますfruits()。

同じことが関数の定義にも当てはまりますxmlhttp.onreadystatechange=function()

fruits()したがって、これらの関数はが呼び出されるまで使用できません。

コードは次のようになります。

function fruits()  
    {
        var  
        xmlhttp;  
        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)  
            {  
                xmlDoc = xmlhttp.responseXML;
                document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("fruits"); 
            }
        }

        //something went wrong here : this code ended up in the function that was to be called when xmlhttp was done with its GET operation.
        //consequently it was never called
        xmlhttp.open("GET","document.xml", true);  
        xmlhttp.send();  
    } // <-- this here bracket was missing

    function vegetables()  
    {
        var  
        xmlhttp;  
        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)  
            {  
                xmlDoc = xmlhttp.responseXML;
                document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("vegetables"); 
            }  
        }

        //the same thing happened here

        xmlhttp.open("GET","document.xml", true);  
        xmlhttp.send();  
    }
于 2012-09-28T08:40:35.873 に答える