Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy How do I create list of anchors from Server Side Script

    Need to create a set of hyperlink bookmarks to goto same page. Categories are created on server side. Currently lists only one id; need to list them all. I think I am missing something small, how can I get this script to work.

    <body onload='onLoadThisLink()'>

    <script type="text/javascript">
    function onLoadThisLink(){

    for (var i=0; i < tags.length; i++) {
    var formInput = document.getElementById("theInput").value;
    document.getElementById("parentLink").innerHTML = formInput;
    }
    }
    </script>

    <div id='parentLink'>
    <div id="theInput" value='Text A'></div>
    <div id="theInput" value='Text B'></div>
    <div id="theInput" value='Text C'></div>
    <div id="theInput" value='Text D'></div>
    </div>
    </body>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You can't use the same ID more than once. You need to use a class. Although this will work
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript">
    var tags = document.getElementsByTagName('div');
    function onLoadThisLink()
    {
    	for (var i = 0; i < tags.length; i++)
    	{
    		if(tags[i].className == 'theInput')
    		{
    			var formInput = document.createTextNode(tags[i].getAttribute('value'));
    			document.getElementById('parentLink').appendChild(formInput);
    		}
    	}
    }
    window.onload = onLoadThisLink;
    </script>
    </head>
    <body>
    <div id='parentLink'>
    	<div class="theInput" value='Text A'></div>
    	<div class="theInput" value='Text B'></div>
    	<div class="theInput" value='Text C'></div>
    	<div class="theInput" value='Text D'></div>
    </div>
    </body>
    </html>
    Its also invalid HTML. Why are you generating stuff like this anyways? Surely there are better ways. The valid approach would be to put the text inside of the div like so
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .theInput {
    display:none;
    }
    </style>
    <script type="text/javascript">
    var tags = document.getElementsByTagName('div');
    function onLoadThisLink()
    {
    	for (var i = 0; i < tags.length; i++)
    	{
    		if(tags[i].className == 'theInput')
    		{
    			var formInput = document.createTextNode(tags[i].firstChild.data);
    			document.getElementById('parentLink').appendChild(formInput);
    		}
    	}
    }
    window.onload = onLoadThisLink;
    </script>
    </head>
    <body>
    <div id='parentLink'>
    	<div class="theInput">Text A</div>
    	<div class="theInput">Text B</div>
    	<div class="theInput">Text C</div>
    	<div class="theInput">Text D</div>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,047
    Thanks
    0
    Thanked 251 Times in 247 Posts
    The "tags" variable declaration should be inside the onLoadThisLink function for it to work.
    Code:
    <script type="text/javascript">
    var tags = document.getElementsByTagName('div');
    function onLoadThisLink()
    {
    	for (var i = 0; i < tags.length; i++)
    	{
    		if(tags[i].className == 'theInput')
    		{
    			var formInput = document.createTextNode(tags[i].firstChild.data);
    			document.getElementById('parentLink').appendChild(formInput);
    		}
    	}
    }
    window.onload = onLoadThisLink;
    </script>
    </head>
    <body>
    <div id='parentLink'>
    	<div class="theInput">Text A</div>
    	<div class="theInput">Text B</div>
    	<div class="theInput">Text C</div>
    	<div class="theInput">Text D</div>
    </div>
    </body>

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by glenngv View Post
    The "tags" variable declaration should be inside the onLoadThisLink function for it to work.
    Was that referring to my solutions or to the OP's original code? The solutions I gave both work with the tags variable out of the function.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,047
    Thanks
    0
    Thanked 251 Times in 247 Posts
    I was referring to your solution. We all know that you cannot access an element that has not loaded yet. But strangely your code works when I tested it in IE6. If you put the alerts like below, you will see it alerts 0 and 5 divs. I don't know if this is correct behavior. I don't have Firefox here at work to test it further.
    Code:
    var tags = document.getElementsByTagName('div');
    alert(tags.length); //alerts 0
    
    function onLoadThisLink()
    {	alert(tags.length); //alerts 5
    	for (var i = 0; i < tags.length; i++)
    	{
    		if(tags[i].className == 'theInput')
    		{
    			var formInput = document.createTextNode(tags[i].firstChild.data);
    			document.getElementById('parentLink').appendChild(formInput);
    		}
    	}
    }
    window.onload = onLoadThisLink;

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    It does the same thing in Firefox. I think the reason why this works is because nothing is being done to the elements until after the page has loaded. Its just creating an array. For example if I tried this it would error out.
    Code:
    var tags = document.getElementsByTagName('div');
    tags[0].style.display = 'none';
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,047
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Yes that won't work because at that point, there's no div yet that's why tags.length is 0. What I'm wondering is you didn't re-initialized the tags variable inside the function but the variable seems "re-executed" to get all the divs. Maybe that's how getElementsByTagName works.


  •  

    Posting Permissions

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