这是我的 html 文件。我试图在下拉选择更改后在 div 部分显示图像。图像的来源位于 XML 文件中。它给出一个错误，指出 Cannot set property 'src' of 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;
}
最佳答案
这是因为document.write(str);
此方法用 str 替换整个文档，从而删除 'change'。
您想要使用 document.getElementById('change').appendChild(str) 附加元素。
关于javascript - 根据下拉选择更改图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37004783/