...

View Full Version : Displaying info from javascript array randomly.



An Enigman
07-22-2010, 08:05 AM
Hi all,

I want to display varying company information from a javascript array randomly each time the page is refreshed. My problem is that the each piece of company information must be split up into 3-4 array elements since I have set up spans in the body where the information go accordingly and as such I don't how to randomize that.

The relevant code is (I will only give two company examples as it's a long list):



<script type="text/javascript" language='javascript'>
function compInfo(comp){
var companyInfo = new Array();
if(comp == document.getElementById('test').innerHTML)
{
//insert business name here.
companyInfo[0] = 'Test';
//insert business type here.
companyInfo[1] = 'Media';
//insert street name here.
companyInfo[2] = 'Test Road.';
//insert actual opening time here.
companyInfo[3] = '5am - 10pm';
//insert actual closing time here.
companyInfo[4] = 'Christmas';
//insert contact info here.
companyInfo[5] = 'test';
//insert web address here.
companyInfo[6] = '<a href="http://www.test.com" style="color: #0092DD; text-decoration: none;">test.com</a>';
//insert image link here.
companyInfo[7] = 'images/test.jpg';
}

if(comp == document.getElementById('test1').innerHTML)
{
//insert business name here.
companyInfo [0] = 'Test1';
//insert business type here.
companyInfo [1] = 'Club';
//insert street name here.
companyInfo[2] = 'Test1 Road.';
//insert actual opening time here.
companyInfo[3] = '5am - 10pm';
//insert actual closing time here.
companyInfo[4] = 'Christmas';
//insert contact info here.
companyInfo[5] = 'test1';
//insert web address here.
companyInfo[6] = '<a href="http://www.test1.com" style="color: #0092DD; text-decoration: none;">test1.com</a>';
//insert image link here.
companyInfo[7] = 'images/test1.jpg';
}

document.getElementById('title').innerHTML =companyInfo[0];
document.getElementById('name').innerHTML = companyInfo[1];
document.getElementById('street').innerHTML = companyInfo[2];
document.getElementById('open').innerHTML = 'Open';
document.getElementById('otime').innerHTML = companyInfo[3];
document.getElementById('close').innerHTML = 'Closed'
document.getElementById('ctime').innerHTML = companyInfo[4];
document.getElementById('contact').innerHTML = 'Contact';
document.getElementById('cinfo').innerHTML = companyInfo[5];
document.getElementById('web').innerHTML = companyInfo[6];
document.getElementById('image').style.display = 'block';
document.getElementById('image').src = companyInfo[7];


}
</script>
</head>
<body>
<SPAN ID='test' onclick="compInfo(document.getElementById('test').innerHTML);"><b>Test</b></SPAN>
<SPAN ID='test1' onclick="compInfo(document.getElementById('test1').innerHTML);"><b>Test1</b></SPAN>

//info shown here:
<div style='text-overflow: ellipsis;'>
<table cellpadding='0' cellspacing='0' border='0' style='height:178px; width:185px;'>

<tr>


<td align="left" style='height:25px;'>

<b><SPAN ID='title' ></SPAN></b>
</td>

</tr>

<tr>


<td align="left" >



<SPAN ID='name' ></SPAN>

<br />


<SPAN ID='street'></SPAN>

<div style='height:8px;'>


</div>

<SPAN ID='open'></SPAN>

<br />

<SPAN ID='otime'></SPAN>

<br />

<SPAN ID='close'></SPAN>

<br />

<SPAN ID='ctime'></SPAN>

<br />

<div style='height:8px;'>


</div>

<SPAN ID='contact'></SPAN>

<br />

<SPAN ID='cinfo'></SPAN>

<SPAN ID='web'></SPAN>

<img ID='image' style='display:none;'></img>


</td>



</tr>



</table>


</div>

</body>


So essentially the process is:
1. The person clicks on the company name.
2. Relevant information from the array is shown in the div.

But what I want is that on startup, information about a random company is shown automatically. How can I achieve this?

Thanks.

santhoshj400
07-22-2010, 12:06 PM
Hi function randOrd(){
return (Math.round(Math.random())-0.5); }

We can now randomize any array. The following example shows how:

anyArray = new Array('3','a','5','F','x','47');
anyArray.sort( randOrd );
document.write('Random : ' + anyArray + '<br />';);

Hope it helps

Thanks and Regards

Old Pedant
07-22-2010, 08:06 PM
You mean this?



<html>
<head>
<script type="text/javascript">
function Info( nm, bt, st, tms, tme, con, url, img )
{
this.companyName = nm;
this.businessType = bt;
this.streetAddress = st;
this.openingTime = tms;
this.closingTime = tme;
this.contact = con;
this.link = url;
this.image = img;
}

var companies = [
new Info("Test","Media","Test Road","5am - 10pm","Christmas","test",
'<a href="http://www.test.com" style="color: #0092DD; text-decoration: none;">test.com</a>',
'images/test.jpg'),
new Info("Test1","Club","Test1 Road", ... etc. ... ),
new Info( ... ),
...
new Info( ... )
];

function showInfo( n )
{
var companyInfo = companies[n];
document.getElementById("name") = companyInfo.companyName;
document.getElementById("street") = companyInfo.streetAddress;
... etc. ...
}
</script>
</head>
<body>
<script type="text/javascript">
for ( var c = 0; c < companies.length; ++c )
{
var cname = companies[c].companyName;
document.write('<a href="#" onclick="showInfo('+c+'); return false;">'
+ cname + '</a><br/>\n');
}
</script>
...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum