Hey there! I've been working on my HTML file and ran into a little issue. I'm trying to change the image in the div section based on a dropdown selection that modifies the source of the image from an XML file. However, I keep getting an error that says 'Cannot set property 'src' of null'. Any assistance would be greatly appreciated!
HTML
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<img id="change" src="ecomm.jpg" onload="loadXMLDoc()"/>
<div id="imagechange" >
</div>
</body>
</html>
Script
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;
}