Script Error making no sense!

[Viajero]

I have a script here, a real easy one. When you click a link, instead of anchoring the user to the section, it hides each section and based off the link you select the corresponding text will appear in a DIV.

Except right now, you click on link one, and the right text comes up. Then you click on link 2 and nothing happens, then you click on link three and the text for link 2 shows up.

I'm assuming it's something with my for loop, so then I tried to do iterate every other object, but then the script froze my browser.... So I don't know I'm so confused how such a basic script is giving me a really odd problem.

Here they are:

<div id="links">
	<a href="#1">Link 1</a>
    <a href="#2">Link 2</a>
    <a href="#3">Link 3</a>
    <a href="#4">Link 4</a>
</div>
<div id="information">
	<div id="1" name="1">This is the description for the first div element</div>
    <div id="2" name="2">This is the description for the second div element</div>
    <div id="3" name="3">This is the description for the third div element</div>
    <div id="4" name="4">This is the description for the fourth element</div>
</div>

and the JS:

init: function() {
		elems = document.getElementById("information");
		links = document.getElementById("links");
		content = document.createElement("div");
		contentText = document.createTextNode("This is the Text");
		
		content.setAttribute("id", "content");
		content.style.overflow = "visible";
		content.appendChild(contentText);
		
		document.body.appendChild(content);
		
		elems.style.visibility = "hidden";
		
		for(i = 0; i < links.childNodes.length; i++) {
			if(links.childNodes[i].nodeType == 1) {
				links.childNodes[i].addEventListener('click', divReplace.linkClick, false);
			}
		}
	},
	
	linkClick: function() {
		theLink = this;
		div = theLink.getAttribute("href");
		
		text = elems.childNodes[div[1]].firstChild.nodeValue;
		content.firstChild.nodeValue = text;
	}

I'm assuming that it's something really simple that I am over looking, or something in my code is acting up.

Thank you for your help,
Viajero

[MrNobody]

Me thinks this:

text = elems.childNodes[div[1]].firstChild.nodeValue;

should be this:

text = elems.childNodes[div.substr(1)].firstChild.nodeValue;

[Viajero]

I tried the substring and it did nothing, I believe the problem is something with my for loop, but as far as I can see, there IS NO ERROR!

[MrNobody]

Upload it to a website and provide a live link and I'll tell you exactly what is wrong with it.

[Viajero]

Alrighty, here's the link:

http://iammitch.com/webdev/

[MrNobody]

Firefox's Firebug showed me the issue. The problem is that there are text nodes between each of your four DIV's -- thus you can't retrieve a node by relative number. So, change your four HREF's and four DIV ID's because ID's are supposed to start with a letter. Then, change this statement:

text = elems.childNodes[div[1]].firstChild.nodeValue;

To this:

text = elems.getElementById(div.substr(1)).firstChild.nodeValue;

[Viajero]

Hmmmm, that made sense, but it's still not working....

[MrNobody]

Evidently you didn't update the page at that link, above, because that page still looks like it did before.

[Viajero]

Ah, sorry about that, I updated it just now.

I also added a little conditional check in the click listener that goes like so:

if(elems.childNodes[parseInt(div.substr(1))].firstChild.type != 3) {
			text = elems.childNodes[parseInt(div.substr(1))].firstChild.nodeValue;
		} else {
			text = elems.childNodes[parseInt(div.substr(1)) + 1].firstChild.nodeValue;
		}

so if the child node is a text node then it skips to the next child node....

I really appreciate your help MrNobody.

[MrNobody]

That is going to break it further. I already told you the adjustments to make to prevent getting a text node. And you have to change these to match:

<a href="#1">Link 1</a>
<a href="#2">Link 2</a>

<a href="#3">Link 3</a>
<a href="#4">Link 4</a>

[Viajero]

Alright, I made those adjustments, but now i'm getting an error saying that elems.getElementById is not a function.....

Am I really looking something over here. I uploaded the newest update by the way.

Thanks again.

[MrNobody]

Hard to follow directions, is it? This is what the HTML is supposed to look like. Note that I made the links match the div's and removed the name attribute from the div's:

<!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">
<title>Object Replacement</title>
<script src="test_files/main.js" type="text/javascript"></script>
</head>

<body>

<div id="links">
	<a href="#n1">Link 1</a>
	<a href="#n2">Link 2</a>
	<a href="#n3">Link 3</a>
	<a href="#n4">Link 4</a> 
</div>
<div id="information" style="visibility: hidden;">
    <div id="n1">This is the description for the first div element</div>
    <div id="n2">This is the description for the second div element</div>
    <div id="n3">This is the description for the third div element</div>
    <div id="n4">This is the description for the fourth element</div>
</div>

<div id="content" style="overflow: visible;">This is the Text</div>

</body>
</html>

This is what the JavaScript looks like:

// JavaScript Document

var divReplace =
{
	init: function() {
		elems = document.getElementById("information");
		links = document.getElementById("links");
		content = document.getElementById("content");
		for(i = 0; i < links.childNodes.length; i++) {
			if (links.childNodes[i].tagName == "A") {
				links.childNodes[i].addEventListener('click', divReplace.linkClick, false);
			}
		}
	},
	
	linkClick: function() {
		theLink = this;
		div = theLink.getAttribute("href");
		text = document.getElementById(div.substr(1)).firstChild.nodeValue; 
		content.firstChild.nodeValue = text;
	}
};

window.addEventListener("load", divReplace.init, false);

[Viajero]

Sorry about that, I guess I wasn't reading close enough.

Thank you for your help, I honestly appreciate it.

Thanks again,
Viajero

[MrNobody]

No problem.