Help to populate DIV from an array

**~~woodknut~~** · 07-15-2004, 05:10 PM

I would like to populate a DIV based on elements of 3 arrays.
Specifically I would like to maintain Title, Author, and URL-of-Document:

var aAuthor = newArray("Joe Smith", "John Baker", "Jane Jones");
var aTitle = newArray("How to Golf", "I Want My MTV", "Dating In the 90s");
var aLink = newArray("articles/golf.html", "articles/mtv.html", "articles/dating.html");

in a separate, external *.js file. If this can be accomplished within a single array then great.

Here's a function (in another external *.js file) that's not working:
function writeScroll(arr, element) {
nC = document.getElementById(element);
nC.innerHTML = "";
for(i=0;i<arr.length;i++)
nC.innerHTML = nC.innerHTML + arr[i] + '<br>';
}

Here's the code within the page body:
<DIV id=nContainer>
<script language="JavaScript">writeScroll('aTitle', 'nContainer');</script>
DIV>

I realize that the "author" and "link" items are not being referenced as yet...I thought I would get one portion to work first. I appreciate any direction you can provide; the archives don't address this problem directly.

W.

**coothead** · 07-16-2004, 06:51 AM

Hi there woodknut,

Here is a basic example using .innerHTML.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>innerHTML</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
     background:#aaaaaa;
 }
#foo {
     position:absolute;
     top:60px;
     left:400px;
     width:162px;
     height:100px;
     border:solid 1px #000000;
     background:#ffffff;
     text-align:center;
     padding:10px 0 0 0;
 }
#links {
     width:70px;
     border:solid 1px #000000;
     background:#ffffff;
     padding:10px;
 }
a:hover {
     color:#ff0000;
 }
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
  var aAuthor = new Array("Joe Smith", "John Baker", "Jane Jones");
  var aTitle = new Array("How to Golf", "I Want My MTV", "Dating In the 90s");
  var aLink = new Array("articles/golf.html", "articles/mtv.html", "articles/dating.html");
  var front="<a href=";
  var back=">go there</a>";

function writeScroll(num) {
     document.getElementById("foo").innerHTML=aAuthor[num]+"<br />"
     +aTitle[num]+"<br /><br />"+front+aLink[num]+back;
 }
//]]>
</script>

</head>
<body>

<div id="foo"></div>

<div id="links">
<a href="#"onclick="writeScroll(0)">golf</a><br />
<a href="#"onclick="writeScroll(1)">MTV</a><br />
<a href="#"onclick="writeScroll(2)">Dating</a>
</div>

</body>
</html>

coothead

**~~woodknut~~** · 07-19-2004, 10:12 AM

Thank you...that's a good example and it works quite well.

Borrowing from that example I would like to be able to place the function in an external *.js for use in multiple pages:

editing the function to pass a variable didn't work:
(contained in scroll.js with an include in the main page header)

function writeScroll(element) {
document.getElementById(element).innerHTML=document.getElementById(element).innerHTML+"<UL>";
for(i=0;i<aAuthor.length;i++)
document.getElementById(element).innerHTML=document.getElementById(element).innerHTML + "<LI>" + aAuthor[i]+"<br />"
+aTitle[i]+"<br /><br />"+front+aLink[i]+back+"</LI>";
document.getElementById(element).innerHTML=document.getElementById(element).innerHTML+"</UL>";

}

Here's the call within the page:
<body onload="writeScroll('foo')">

How do I handle the arrays? I placed them in the scroll.js file just like this:
var aAuthor = new Array("Joe Smith", "John Baker", "Jane Jones");
var aTitle = new Array("How to Golf", "I Want My MTV", "Dating In the 90s");
var aLink = new Array("articles/golf.html", "articles/mtv.html", "articles/dating.html");
var front="<a href=";
var back=">go there</a>";

I appreciate your help.
W.

**coothead** · 07-19-2004, 12:38 PM

Hi there woodknut,

I may be wrong but I am assuming that you want to rotate these links.
Using an external link for the javascript is no problem, you will also need to do the same for the css

Check the attached .zip file to see how it works.

coothead

Thread: Help to populate DIV from an array

Thread Tools

Related

Populate fields by javascript using MYSQL Forum: Javascript Forum

Passing PHP array from one file to Javascript array in another file Forum: PHP Forum

How do I populate nested drop down lists? Forum: CGI Perl Forum

Populate fields when checkbox selected Forum: Javascript Forum

Is it possible to dynamically populate a textarea with data from a database? Forum: HTML Forum

Help to populate DIV from an array

Tags for this Thread

Cloudjiffy- PaaS for Developers