Hi,

I am trying to do a number of things on a page through javascript. Firstly, I have a number of links, clinking on one of them updates a div on a page, through the following process. Removing the list i.e. ul tags and its contents from the div, and then recreating the ul tags, with contents of li tags and within each li tag, have an a tag.

In the end, it will come like this.
<ul>
<li><a onClick="changeImage(community[1],'pcs','pdesc')>A short day</a></li>
</ul>

On clicking the links, it will change the picture on another div.

I know the changeImage function works as I have used it on another site, the clearList function also works, but the populateList function is giving errors one after the other.

The section of the html code is found here

Code:
<ul class="pics">
	  	<li><a ></a></li>
	  	<li><a href="#" id="community" onclick="clearList(); populateList('community')">Laborie Community</a></li>
		<li><a href="#" id="union" onclick="clearList(); populateList('community')">Laborie Credit Union</a></li>
		<li><a href="#" id="celebration" onclick="clearList(); populateList('community')">Laborie Credit Union - Night of Celebration</a></li>
	  </ul>

	  <div id ="innerContent" class="greenborder">
	  <h6 class="green green2" >Photo Gallery</h6>

	  <div id="photoshow" class="showphoto">
	  <img src="images/oleman.jpg" alt="view of laborie" height="200" width="200" id="pcs" />
	  <p id="pdesc">Coastline view of Laborie</p>
	  <!-- end of photoshow div -->
	  </div>

	  <div id="linksList">
	  	<ul id="llist">
			<li><a href="#" >this ole man</a></li>
		</ul>
	  <!-- end of linkslist div -->
	  </div>
and the javascript code as

Code:
var union = [
        {	desc: 'picture 1',
			image:'images/board00.jpg',
			img:''
		},
	{	desc: 'picture 2',
			image:'images/credit0.jpg',
			img:''
		},
	{	desc: 'picture 3',
			image:'images/superv0.jpg',
			img:''
		}
];

function changeImage(obj, dest, pdesc) {
	document.getElementById(pdesc).innerHTML = obj.desc;
	document.getElementById(dest).src = obj.img.src;
}

function clearList() {
	var anchors = document.getElementById("llist");
	var parent=anchors.parentNode;
	parent.removeChild(anchors);
}

function populateList(titles2) {
	var newAnchor = document.createElement("ul");
		newAnchor.setAttribute("id", "llist");
	for (var i=0; i<titles2.length; i++) {
		var parent = document.getElementById("llist");
			var anchorList =document.createElement("li");
				var anchor2=document.createElement("a");
					var anchorText = (titles2.desc);
				anchor2.appendChild(anchorText);
                                anchor2.setAttribute("href',"#');
				anchor2.setAttribute("onClick", "changeImage(titles2[x+1],'pcs','pdesc')");
			anchorList.appendChild(anchor2);
		parent.appendChild(anchorList);		
	}
}
any help appreciated.

CathyM