SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problems with javascript appendChild method

    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

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I tried re-working the populateList function and came up with this

    Code:
    function populateList(titles2) {
    	var newAnchor = document.createElement("ul");
    		newAnchor.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 = document.createTextNode(titles2.desc);
    				anchor2.appendChild(anchorText);
    				anchor2.href='#';
    				anchor2.onClick= "changeImage(titles2[x+1],'pcs','pdesc')";
    			anchorList.appendChild(anchor2);
    		newAnchor.appendChild(anchorList);		
    	}
    }
    I don't get any more errors, yet, the ul list is not populated. Not sure if I have to put another reference of the div id-'linklist' for it to be added to that div and be viewed, of it the list is not being populated at all.

    CathyM

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where do you make the new list a child of an element that's in the document?

    In JavaScript event names of events defined in HTML 4.01 are all lowercase.

    I am concerned that your code may not be following JavaScript Best Practices I recommend you read up on them.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I made some further changes to the code. It now adds to the document with the last statement.

    There are two main errors in the code. It counts each line to get the length of the code in most cases, instead of the curly bracket as one, therefore will get length of 9, instead of 3. Then get the list items all saying undefined. It will convert titles2 to the correct name anywhere in the code, except where it needs to select the statement and convert it to text. i.e. in the var anchorText line, not sure how to make it not read the variable as a literal, for example community and not titles2 in that statement.

    Code:
    function populateList(titles2) {
    	var newAnchor = document.createElement("ul");
    		newAnchor.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[i].desc;
    				anchor2.appendChild(anchorText);
    				anchor2.href='#';
    				anchor2.onClick= "changeImage(titles2[i],'pcs','pdesc')";
    			anchorList.appendChild(anchor2);
    		newAnchor.appendChild(anchorList);
    		var parent2 = document.getElementById('linksList');
    		parent2.appendChild(newAnchor);		
    	}
    }
    I will work on the best practice.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I have sort of got the script to work, in an 'ugly' way..

    I made the following changes, for the html code I now have two parameters for the populateList function. The same name in quotes and without quotes. This works ok both in Firefox and Opera. I can repopulate the div with the new list, and click on items on the new list to change the picture. However, in IE, while I can repopulate the list, the onclick function does not work.

    Any ideas on what to change to make the onclick function work in IE. Currently testing in IE7.

    Code:
    <ul class="pics">
    	   	<li><a href="#" onclick="clearList(); populateList(community,'community')">Laborie Community</a></li>
    		<li><a href="#" onclick="clearList(); populateList(lcunion,'lcunion')">Laborie Credit Union</a></li>
    		<li><a href="#" onclick="clearList(); populateList(celebration,'celebration')">Laborie Credit Union - Night of Celebration</a></li>
    </ul>
    javascript function that was changed.
    Code:
    function populateList(titl,tx) {
    	//alert(titl);
    	var newAnchor = document.createElement("ul");
    		newAnchor.id='llist';
    	for (var i=0; i<titl.length; i++) {
    		var parent = document.getElementById("llist");
    			var anchorList =document.createElement("li");
    				var anchor2=document.createElement("a");
    					var anchorText= document.createTextNode(titl[i].desc);
    					//alert(anchorText);
    				anchor2.appendChild(anchorText);
    				anchor2.href='#';
    				anchor2.setAttribute("onclick","changeImage("+tx+"["+i+"],'pcs','pdesc')");
    				var b = anchor2.getAttribute("onclick");
    				//alert(b);
    			anchorList.appendChild(anchor2);
    		newAnchor.appendChild(anchorList);
    		var parent2 = document.getElementById('linksList');
    		parent2.appendChild(newAnchor);		
    	}
    }
    Any help appreciated.

  6. #6
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is closures, something that gave me headaches for years. It's easily solved once you know how:

    replace
    anchor2.setAttribute("onclick","changeImage("+tx+"["+i+"],'pcs','pdesc')");

    with
    setAnchorOnclick(anchor2,titl[i],'pcs','pdesc');

    then add the function
    Code:
    function setAnchorOnclick(anchor,arrayElement,param2,param3) {
    	anchor.onclick = function () {
    		changeImage(arrayElement,param2,param3);
    	}
    }
    Now you can get rid of tx altogether

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thnxs Jim,

    I worked perfectly in the three browsers tested. I must really work on updating my javascript skills.

    Thanks again, after almost three days of testing I can now move forward.

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I spoke too soon. I really don't know what to do with IE. The function work as expected in firefox and opera. However, with IE, only part of the changeImage function works, It will change the text as expected, but says it can't find the image.

    I've used the changeImage function in other files and it has worked, so I am guessing, that it doesn't like the term arrayElement.

    any further help will be appreciated. If needs be I can post the page and javascript to a site and post link for review.

  9. #9
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Sorry, for anyone who might still have a look at it. The method proposed by Jim Frazer works with IE when I post the page live, but not from the local host, so I have moved on with that, taking it as one of IE quirks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •