Help with javascript/XML flexibility

[letsgetsilly]

Hello all,

A website I am working on uses javascript to read 6 headlines from an XML file and then outputs them to a <p> element by simply referring to the element's ID and filling it with the XML content. I need to have the ability to easily support 12 headlines.

The requirement is for a vice president here (who knows little of html/javascript/XML) simply add headlines to the XML file and have them automatically show up in the web page.

Currently I am just stepping through the XML file and outputting which won't do the job. I need to have some type of loop and if statement, but I have limited skills with java/xml. My code below will help illustrate whats going on. Thanks so much for any help!

Here is my htmlcode, followed by Javascript, followed by XML:
HTML:

<p class="headlines" id="headline1"></p>
<br class="altheight">
<p class="headlines" id="headline2"></p>
<br class="altheight">
...etc through "headline 6"

Javascript:

var xmlDoc
function loadXML()
{
//load xml file
// code for IE
if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load("KDXHeadlines.xml");
getmessage()
}
// code for Mozilla, etc.
else if (document.implementation && document.implementation.createDocument)
{
xmlDoc= document.implementation.createDocument("","",null);
xmlDoc.load("KDXHeadlines.xml");
xmlDoc.onload=getmessage
}
else
{
alert('Your browser cannot handle this script');
}
}

function getmessage()
{
document.getElementById("headline1").innerHTML=xmlDoc.getElementsByTagName("headline1")[0].firstChild.nodeValue
document.getElementById("headline2").innerHTML=xmlDoc.getElementsByTagName("headline2")[0].firstChild.nodeValue
...etc through "headline 6"
}

XML

<?xml version="1.0" encoding="ISO-8859-1"?>
<headlines>
<headline1>Our team wins</headline1>

<headline2>Yadda yadda</headline2>
...etc through <headline 6>
</headlines>

To summarize, I need the ability to simply add to the xml file and have it output to the html file. I have attempted to create blank XML tags (i.e.
<headline7></headline7> but they provoke an error.

Any help is much appreciated! I don't know where to go from here.

[Fotiman]

You are using XML incorrectly. Instead of this:

<headlines> 
<headline1>Our team wins</headline1> 
<headline2>Yadda yadda</headline2> 
... 

Your XML should look more like this:

<headlines> 
<headline>Our team wins</headline> 
<headline>Yadda yadda</headline> 
... 

Note, no numbering. Then your JavaScript would look more like this:

function getmessage() 
{ 
 var hList = xmlDoc.getElementsByTagName("headline"); 
 for( var i = 0; i < hList.length; i++ ) 
 { 
  // Create a new element in your HTML document 
  var p = document.createElement("p"); 
  var attributeNode = p.getAttributeNode("class"); 
  if (attributeNode) 
  { 
  attributeNode.value = "headlines";    
  } 
  else 
  { 
  p.setAttribute("class","headlines"); 
  } 
  p.appendChild( document.createTextNode( hList[i].firstChild.nodeValue;) ); 
  // Append the node to your document 
  var headlinesContainer = document.getElementById("headlinesContainer"); 
  headlinesContainer.appendChild( p ); 
 } 
} 

Then change your HTML document to only include the headlinesContainer without explicitly creating inner elements. For example, instead of this:

[/pre]
<p class="headlines" id="headline1"></p>
<br class="altheight">
<p class="headlines" id="headline2"></p>
<br class="altheight">
[/pre]

Your HTML should look more like this:

<div id="headlinesContainer"></div>

Also, there's no need for the <br> element. Just apply those styles to the <p> elements within headlinesContainer instead.

Let me know if you have more questions.

[edited by: Fotiman at 6:18 pm (utc) on Aug. 14, 2006]