li comes up undefined? [Archive]

Ne0nx3r0

06-08-2009, 05:17 PM

Great site! I've been a long time troller, but usualy I find my answers before needing to post.

I was playing around with making a dynamic accordion script (I found plenty of accordions out there, but none allowed elements to be removed) and for some odd reason whenever I run this the first LI element comes up undefined. I made this sample to explain the issue. You can click walk to see the effect.

I assume this is some misunderstanding on my part, but after four days on and off I'm just stumped. Any ideas?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>

onload=function(){
if (document.getElementsByClassName == undefined) {
document.getElementsByClassName = function(className)
{
var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
var allElements = document.getElementsByTagName("*");
var results = [];

var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
results.push(element);
}
return results;
}
}
}

function walk(elementObj){
var newDiv = document.createElement('div');
var items = elementObj.getElementsByTagName("*");
var i=items.length;
var item;

do
{
item = items[i];
if(item == undefined) newDiv.innerHTML += '<br />' + item;
else newDiv.innerHTML += '<br />' + item.nodeName;
}
while (--i);
document.body.appendChild(newDiv);
}

var sections = [];

function addSection(header,content){

contentBoxes.innerHTML += '<li><a href="#" onclick="toggleMyContent(this);return false;">'+header+'</a><div

class="accordionDiv" id="accord'+contentBoxes.childNodes.length+'">'+content+'</div></li>';

/* 'manual' method for testing
var newContainer = document.createElement('li');

var newHeader = document.createElement('a');
newHeader.onclick = 'toggleMyContent(this);return false;';
newHeader.setAttribute('href','#');
newHeader.innerHTML = header;
newContainer.appendChild(newHeader);

var newContent = document.createElement('div');
newContent.setAttribute('id','accord'+contentBoxes.childNodes.length);
newContent.innerHTML = content;
newContainer.appendChild(newContent);

contentBoxes.appendChild(newContainer);
*/
}

function removeSection(section){
contentBoxes.removeChild(contentBoxes.childNodes[section]);

//realign the divs
sections = document.getElementsByClassName('accordionDiv');
for(i=0;i<sections.length;i++){
sections[i].id = 'accord' + i;
}
}
</script>
</head>
<body>
<input type="button" value="Add Section"

onclick="addSection(Math.floor(Math.random()*100),Math.floor(Math.random()*100),true);" />
<input type="button" value="Remove 2nd Section" onclick="removeSection(1);" />
<input type="button" value="Walk" onclick="walk(contentBoxes);" />
<ul id="accordionContainer"></ul>

<script>var contentBoxes =

document.getElementById('accordionContainer');addSection('Header','Content');addSection('Header','Co ntent');addSection('Heade

r','Content');</script>

</body>
</html>