Okay, so I'm designing a website with the use of HTML, CSS, and (hopefully) XML. There's a specific section of the website I'm trying to use XML for, and I'm having some difficulties incorporating XML the way I want to.
My problem is I'm trying to find a way to read an image (or an image directory) with XML and print it out onto my HTML website using call commands through a for loop, so I can simply input the data into the XML file with attributes and easily call them for any page on the site. I was also looking to eventually add on a search bar, and I've been told that XML would be a great add-on because of the attributes and elements you can add. Edit: I believe I'm using the wrong command pulling the images into XML. Any info on that would be helpful.
Note: For simplicity reasons, I've stripped down the coding on HTML and XML to what I'm having problems with.
Here's my XML file
<inventory>
<shirt>
<picture><image href="tank_top.jpg"/></picture>
<name>Tank Top</name>
<description>This is a tank top. </description>
<price>$12.00</price>
</shirt>
<shirt>
<picture><image href="sweater.jpg"/></picture>
<name>Sweater</name>
<description>This is a sweater. </description>
<price>$15.00 </price>
</shirt>
<shirt>
<picture><image href="hoodie.jpg"/></picture>
<name>Hoodie</name>
<description>This is a hoodie. </description>
<price>$17.00 </price>
</shirt>
<shirt>
<picture><image href="long_sleeve_shirt.jpg"/></picture>
<name>Long-Sleeve</name>
<description>This is a long-sleeve. </description>
<price>$20.00 </price>
</shirt>
<shirt>
<picture><image href="t-shirt.jpg"/></picture>
<name>T-Shirt</name>
<description>This is a t-shirt. </description>
<price>$50.00 </price>
</shirt>
</inventory>
Here's my Javascript
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","Example.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("shirt");
for (i=1;i<x.length+1;i++)
{
document.write(x[i].getElementsByTagName("picture")[0].childNodes[0].nodeValue);
document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
document.write(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
document.write(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
}
I even tried using the below code in place of the first "document.write" command for the picture,
var img=new Image(); img.src='insert_image_title_here'; document.body.appendChild( img );
but this only sent my image to the bottom of the page after everything else loaded. And I need to load different titled images every time the rest of the information is printed out (i.e. I need the picture printed, then the name, then description, and then price. Then a different pictured along with its own information that is stored in the XML file).
TL;DR: I need to output an image in HTML, going through JS, that reads an XML file. And I need the XML file to pull the image because of a for loop I have the print commands nested in. Simplified XML and HTML codes are above. Looked for hours for a solution. Found nothing helpful.
Note: I'm only in high school, and although I've been coding for a couple years (mainly with Java and dabbled in HTML) I'm very new to the rest of the coding world... I've actually just started learning to use XML today. Any and all descriptions would be amazingly helpful. And please include any web sources or even books you think may be of help. Thanks so much!
