www.webdeveloper.com
Results 1 to 14 of 14

Thread: Script Error making no sense!

  1. #1
    Join Date
    Apr 2006
    Posts
    18

    Angry Script Error making no sense!

    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:

    HTML Code:
    <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:

    Code:
    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

  2. #2
    Join Date
    Feb 2008
    Posts
    1,666
    Me thinks this:

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

    should be this:

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

  3. #3
    Join Date
    Apr 2006
    Posts
    18
    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!

  4. #4
    Join Date
    Feb 2008
    Posts
    1,666
    Upload it to a website and provide a live link and I'll tell you exactly what is wrong with it.

  5. #5
    Join Date
    Apr 2006
    Posts
    18
    Alrighty, here's the link:

    http://iammitch.com/webdev/

  6. #6
    Join Date
    Feb 2008
    Posts
    1,666
    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;

  7. #7
    Join Date
    Apr 2006
    Posts
    18
    Hmmmm, that made sense, but it's still not working....

  8. #8
    Join Date
    Feb 2008
    Posts
    1,666
    Evidently you didn't update the page at that link, above, because that page still looks like it did before.

  9. #9
    Join Date
    Apr 2006
    Posts
    18
    Ah, sorry about that, I updated it just now.

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

    Code:
    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.

  10. #10
    Join Date
    Feb 2008
    Posts
    1,666
    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>
    Last edited by MrNobody; 11-27-2008 at 06:45 PM.

  11. #11
    Join Date
    Apr 2006
    Posts
    18
    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.

  12. #12
    Join Date
    Feb 2008
    Posts
    1,666
    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:
    HTML Code:
    <!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:
    Code:
    // 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);

  13. #13
    Join Date
    Apr 2006
    Posts
    18
    Sorry about that, I guess I wasn't reading close enough.

    Thank you for your help, I honestly appreciate it.

    Thanks again,
    Viajero

  14. #14
    Join Date
    Feb 2008
    Posts
    1,666
    No problem.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles