...

View Full Version : How do I create list of anchors from Server Side Script



joejoeracer
07-07-2007, 06:04 PM
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>

_Aerospace_Eng_
07-07-2007, 07:42 PM
You can't use the same ID more than once. You need to use a class. Although this will work

<!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

<!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>

glenngv
07-08-2007, 09:10 PM
The "tags" variable declaration should be inside the onLoadThisLink function for it to work.

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

_Aerospace_Eng_
07-08-2007, 09:53 PM
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.

glenngv
07-09-2007, 02:52 PM
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.

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;

_Aerospace_Eng_
07-09-2007, 06:42 PM
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.

var tags = document.getElementsByTagName('div');
tags[0].style.display = 'none';

glenngv
07-10-2007, 07:44 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum