Question

这是我的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;
}

Answer 1

这是因为document.write(str); 此方法使用str替换整个文档，从而删除'change'。

您想使用document.getElementById('change').appendChild(str)附加元素。

http://www.w3schools.com/jsref/met_node_appendchild.asp

根据下拉列表选择更改图片

1 个答案: