Javascript 基于下拉选择更改图像_Javascript_Ajax_Xml

Javascript 基于下拉选择更改图像

javascript ajax xml

Javascript 基于下拉选择更改图像,javascript,ajax,xml,Javascript,Ajax,Xml,这是我的html文件。我试图在下拉选择更改后在div部分显示图像。图像的源位于XML文件中。它给出一个错误，说明无法将属性“src”设置为null。请帮忙 HTML <!DOCTYPE html> <html> <head> <title> </title> </head> <body> <im

这是我的html文件。我试图在下拉选择更改后在div部分显示图像。图像的源位于XML文件中。它给出一个错误，说明无法将属性“src”设置为null。请帮忙

HTML

<!DOCTYPE html>
    <html>
        <head>
            <title>
            </title>
            </head>
    <body>

    <img id="change" src="ecomm.jpg" onload="loadXMLDoc()"/>
      <div id="imagechange" >

          </div>

    </body>
    </html>

脚本

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            myFunction(xmlhttp);
        }
    };
    xmlhttp.open("GET", "bf.xml", true);
    xmlhttp.send();
}

function myFunction(xml) {
    var i;
    var xmlDoc = xml.responseXML;

    var x = xmlDoc.getElementsByTagName("food");

    var str ="<select id='image' onchange='changeFunc(this.value);'>";
    str+= "<option value='select image'> Select Image </image>";

    for(i=0;i<x.length;i++){
        str +='<option value=' + x[i].getElementsByTagName("source")[0].childNodes[0].nodeValue + '>' + x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + '</option>'; 
    }

    str +='</select>';
    document.write(str);

}

function changeFunc(val) {
    document.getElementById('change').src = val;
}

函数loadXMLDoc（）{
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
myFunction（xmlhttp）；
}
};
open（“GET”，“bf.xml”，true）；
xmlhttp.send（）；
}
函数myFunction（xml）{
var i；
var xmlDoc=xml.responseXML；
var x=xmlDoc.getElementsByTagName（“食品”）；
var str=“”；
str+=“选择图像”；
对于（i=0；i这是因为document.write（str）；
此方法将整个文档替换为str
，从而删除“更改”

您想使用document.getElementById（'change'）.appendChild（str）
附加元素
这是因为document.write（str）；
此方法将整个文档替换为str
，从而删除“更改”

您想使用document.getElementById（'change'）.appendChild（str）
附加元素
我尝试使用它，但它在“节点”上抛出了以下错误。“appendChild”：参数1不是“Node”类型。因此，将它附加到节点上。结果是，您有一个很好的
，根本没有被使用。将您的
放在那里。我已经更新了我的答案。我尝试使用它，但它在那里抛出了下面的错误。“appendChild”“节点”：参数1不是“节点”类型。因此将其附加到节点。结果表明，您有一个很好的
，根本没有使用。请将
放在那里。我已更新了答案