...

View Full Version : writing array links to a specific div using innerHTML



rasoodock
12-07-2004, 02:19 AM
Hi,
I'd really, really appreciate any help on this one, as I've gone past the point of smacking my head off a brick wall. Well here goes...

Basically what I have is an array, which stores a list of names. On clicking a button in the body, I wish to call a function which will print these names into a specific div as links. I'm using a for loop to cycle through the array but it just prints out the last element in the array.

The div name is 'test' and the function called by clicking on the button is 'printLinks'.



Hope this isn't too unclear. If anyone can troubleshoot this or suggest an alternative I'd be very grateful.



<script language="javascript" type="text/javascript">
var myAarray=new Array()
myAarray=['amy','andy','anthony','andrew','another'];

var i;
max=myAarray.length;
function printLinks(){
writit('test');
}


function writit(id){
for (i=0;i<max;i++)
if (document.getElementById){


x=document.getElementById(id);
x.innerHTML='';
x.innerHTML='<a href='+myAarray[i]+'>'+myAarray[i]+'</a><br>';


} else if(document.all){
x=document.all[id];
x.innerHTML='<a href='+myAarray[i]+'>'+myAarray[i]+'</a><br>';
} else if(document.layers){
x=document.layers[id];
text2='<P class="testclass">'+text+'</p>;';
x.document.open();
x.document.write(text2);
x.document.close();

}
}

</script>



(based on original script from quirksmode.org)


cheers.

aifilaw
12-07-2004, 04:01 AM
i'm not much into Netscape, so here's a simple iE version:

<script>
var myAarray = new Array('amy','andy','anthony','andrew','another')
function printLinks()
{
lnks = ""
for (i=0; i<myAarray.length; i++)
lnks += myAarray[i].link(myAarray[i]) + "<BR>"

document.all['test'].innerHTML = lnks
}
</script>

<a href="javascript:printLinks()">Print Links</a><p>

<div id=test></div>

hemebond
12-07-2004, 04:28 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>48547</title>
</head>
<body>
<ul id="links"></ul>
<script type="text/javascript">
var list = new Array('amy','andy','anthony','andrew','another');

for(var i = 0; i < list.length; i++)
{
var li = document.createElement("li");
var a = document.createElement("a");
var txt = document.createTextNode(list[i]);

a.setAttribute("href",list[i]);
a.appendChild(txt);

li.appendChild(a);

document.getElementById("links").appendChild(li);
}
</script>
</body>
</html>

rasoodock
12-07-2004, 09:22 AM
Thanks so much folks. Hemebond - haven't tried that yet but will let you know how it goes. Aifilaw, thanks a million, exactly what I was looking for and works a treat in IE and Firefox (PC) and in IE (MAC). Is there any way to get that working on Safari / Mozilla for MAC?

thanks again!

rasoodock
12-07-2004, 11:13 AM
Ok, it gets worse. As well as needing the above code to work within mac (safari and mozilla), I also need to each array to be a multidimensional array.
The aim is that the links are printed to the div and the url for each link differs from the text of the link e.g.:

var myAarray= new Array()
myAarray=[["amy","21312"],["andy","343423"]]

so that the link 'amy' points to the url '21332"

I've tried creating a multidimensional array like this and then tried to retrieve those values like this:

function printLinksA()
{
lnks = ""
for (i=0; i<myAarray.length; i++)
lnks += myAarray[i].link(myAarray[i][1]) + "<BR>"

document.all['test'].innerHTML = lnks
}



but nothing seems to work.


Again any help on this would be hugely appreciated.

thanks again!

Kor
12-07-2004, 12:18 PM
Is there any way to get that working on Safari / Mozilla for MAC?


That is why hemebond gave you a DOM compliant solution. Try it, except that, if you want to replace the div content, you must either to use replaceNode or removeChild methods in before

In fact, should work even the other solution, but you must use the document.getElementById('id') reference, not document.all

Kor
12-07-2004, 12:33 PM
Is this of any help?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
var myAarray= new Array()
myAarray=[["amy","21312"],["andy","343423"]]
function printLinksA(){
var root = document.getElementById('test');
for (i=0; i<myAarray.length; i++){
var a = document.createElement('a');
var n = document.createTextNode(myAarray[i][0]);
var br = document.createElement('br');
a.setAttribute('href',myAarray[i][1]);
a.setAttribute('target','_blank');
a.appendChild(n);
root.appendChild(a);
if(i<myAarray.length-1){
root.appendChild(br)
}
}
}
</script>
</head>
<body leftmargin="20" topmargin="0">
<a href="#" onclick="printLinksA();return false">PRINT LINK</a>
<div id='test'></div>
</body>
</html>

rasoodock
12-07-2004, 12:59 PM
Kor - absolutely brilliant! Exactly what I needed. Thanks to everyone for all your help.

ryatacom
07-23-2008, 05:46 AM
Hi! I'm having almost the same problem, I'm working with GmapEZ and I'm using <div> tag to show maps, but there is a problem. I have a Table like this

<table>
<tr>
<td style="width: 700px;">
<div id="tabladat" style="overflow:auto; width:700px; height:550px;">
.... another table
</div>
</td>
<td>
<div class="GMapEZ GSmallZoomControl GSmallMapTypeControl" id="map" style="overflow:auto; width:400px; height: 550px;">
</div>
</td>
</tr>
</table>


I have a javascript for the "map" object :

function refmapa(latitud, longitud) {
var txt = "http://maps.google.com/maps?ll=" + latitud + "," + longitud + "&amp;t=k&amp;hl=en";
document.getElementById("map").innerHTML = "<a href='" + txt + "'></a>"
}

However when I execute the servlet nothing happens with the DIV , it just turns white and nothing else. I don't know if it's posible to use the <div> tag this way. Please if somebody could help me with this.

Thanks

Rob



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum