Two random arrays on same page?

Question

jonsan32 12 Junior Poster in Training

12 Years Ago

Trying to figure out how to have 2 sets of images display randomly on the same page. I know I have to rename something, but nothing I try is working. Any help would be greatly appreciated. Thanks.

For now I just have the two scripts repeated back to back before the html begins. Within my table, I've listed where the two images would be - again, repeated for now. I like this script because it allows me to resize the images independently, so I couldn't just use a basic random array to accomplish this. And, oh yeah, I'm not very good at coding... so don't go too high over my head with the explanation :-)

<style type="text/css">




#HTML1, #HTML3, #HTML7{
display:none;
}


.avail td{
border-left:1px #aaaaaa solid;
border-right:1px #aaaaaa solid;
}
.number{
font-size:26px;
font-family:arial;
}
.team{
font-family:arial;
}
.EventLink {
 display: block;
 width: 290px;
 height: 110px;
 background: url('') top;
 text-indent: -99999px;
}
.EventLink:hover {
 background-position: 5px 102px;
}

.DetailsLink {
 display: block;
 width: 290px;
 height: 110px;
 background: url('') top left;
 text-indent: -99999px;
}
.DetailsLink:hover {
 background-position: -10px 112px;
}

.SigninLink {
 display: block;
 width: 290px;
 height: 110px;
 background: url('') top;
 text-indent: -99999px;
}
.SigninLink:hover {
 background-position: 11px 110px;
}

.SignupLink {
 display: block;
 width: 290px;
 height: 110px;
 background: url('') top;
 text-indent: -99999px;
}
.SignupLink:hover {
 background-position: -2px 122px;
}


</style>

<SCRIPT LANGUAGE="JavaScript">


// Set up the image files to be used. 
var theImages = new Array();
var imgSize  = new Array();

// do not change this 
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = ''; imgSize[0]={height:200};
theImages[1] = ''; imgSize[1]={height:200};
theImages[2] = ''; imgSize[2]={height:200};
theImages[3] = ''; imgSize[3]={height:200};

// do not edit anything below this line
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}
var whichImage = Math.floor(Math.random()*p);
function showImage(){
document.write('<img src="',theImages[whichImage],'"',
               ' width="',imgSize[whichImage].width,'" "',
               ' height="',imgSize[whichImage].height,'">');
}
</script>


<SCRIPT LANGUAGE="JavaScript">


// Set up the image files to be used. 
var theImages = new Array();
var imgSize  = new Array();

// do not change this 
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = ''; imgSize[0]={height:200};
theImages[1] = ''; imgSize[1]={height:200};
theImages[2] = ''; imgSize[2]={height:200};
theImages[3] = ''; imgSize[3]={height:200};

// do not edit anything below this line
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}
var whichImage = Math.floor(Math.random()*p);
function showImageA(){
document.write('<img src="',theImages[whichImage],'"',
               ' width="',imgSize[whichImage].width,'" "',
               ' height="',imgSize[whichImage].height,'">');
}
</script>


<center>
<table width="1000" height="400">
<tr>
<td rowspan="2">
<SCRIPT LANGUAGE="JavaScript">
showImage();
</script>
</td>
<td align="center"><a class="SigninLink" href="http://bookeo.com/50allstars/customer">Sign-in</a></td>
<td align="center"><a class="SignupLink" href="http://bookeo.com/50allstars/signup">Sign-up</a></td>
<td rowspan="2">
<SCRIPT LANGUAGE="JavaScript">
showImage();
</script>
</td>
</tr>
<tr>
<td align="center"><a class="EventLink" href="http://www.50allstars.com/p/workouts.html">Events</a></td>
<td align="center"><a class="DetailsLink" href="http://www.50allstars.com/p/details.html">Details</a></td>
</tr>
</table><br><br><br><br>


<table width="1000" height="200">
<tr><td width="450" align="center">

<table width=100%><tr><td align="center" style="background-color:#FFFFFF; color:#000000; 

padding:4px 4px 4px 4px; letter-spacing:9px; font-size:16px; font-family:arial; font-weight:bold; word-spacing:4px;">
TEAM SPOTS AVAILABLE
</td></tr><tr><td>

<table width=100% cellpadding=2 cellspacing=0 class="avail"><tr>

<td align="center"><span class="team">hs boys</span><br><span class="number">6</span></td>

<td align="center"><span class="team">hs girls</span><br><span class="number">7</span></td>

<td align="center"><span class="team">ms boys</span><br><span class="number">1</span></td>

<td align="center"><span class="team">ms girls</span><br><span class="number">5</span></td>

<td align="center"><span class="team">elem boys</span><br><span class="number">7</span></td>

<td align="center"><span class="team">elem girls</span><br><span class="number">19</span></td>

</tr></table>

</td></tr></table>

</td><td align="RIGHT">
<font style="font-size:17px; font-family:arial; color:#444444; letter-spacing:5px; word-

spacing:4px;">email us anytime<BR><a href="mailto:staff@50allstars.com" style="color:#000000; 

text-decoration:none;"><B>staff@50allstars.com</B></a></font>
</td></tr></table>
</center>

html-css javascript

2 Contributors
9 Replies
353 Views
22 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by jonsan32

Dani AI

Generated 9 Months Ago

Short summary: was right — the problem was name collisions between the two scripts. Renaming variables works, but it's fragile and easy to break (for example, accidentally calling new Imagex() or using the old p variable when you renamed it). A more robust pattern is to encapsulate each image set in its own little module so there are no globals, no document.write(), and a clean way to avoid duplicate athletes across pools.

A safer approach (modern, small, and reusable) is to keep each pool as an array of objects with a unique id and a src, create the <img> element with DOM methods, and pick from pool B while excluding the id chosen from pool A. This avoids document.write wiping the page, avoids constructor-name mistakes (you must use new Image() if you intend to use the Image constructor), and makes sizing and alt text explicit.

Example pattern (illustrates the idea — adapt IDs/sizing to your page):

function createPool(items, containerSelector) {
  var container = document.querySelector(containerSelector);
  if (!container) return { show: function(){return null;} };
  function rand(arr){ return Math.floor(Math.random()*arr.length); }
  return {
    show: function(excludeIds){
      var candidates = items.filter(function(it){ return !excludeIds || excludeIds.indexOf(it.id) === -1; });
      if (!candidates.length) candidates = items;
      var pick = candidates[rand(candidates)];
      container.innerHTML = '';
      var img = document.createElement('img');
      img.src = pick.src;
      if (pick.width) img.width = pick.width;
      if (pick.height) img.height = pick.height;
      img.alt = pick.alt || '';
      container.appendChild(img);
      return pick;
    }
  };
}

Troubleshooting checklist:

Don’t wrap image URLs in anchor tags when assigning to src — src must be a raw URL string.
Use new Image() (not new Imagex()); renaming built-ins breaks things.
Avoid duplicate global names (or use the closure pattern above).
Avoid document.write() after load; use DOM methods and set alt and size via attributes or CSS.
This yields predictable behavior and makes it trivial to ensure the two displayed images never show the same athlete.

All 9 Replies

GliderPilot 33 Posting Whiz

12 Years Ago

Are you looking to have two seperate groups of images and choose an image from each group two display (I.E. Pool A has 5 images and Pool B has 6 images. Choose 1 random image from Pool A and one from Pool B)

Or are you looking to just have one set of images and you want the script to pick two of those images instead of just one and display both of them.

GliderPilot 33 Posting Whiz

12 Years Ago

Not exactly the most efficient way but you would need to change the name for all occurances of the following variables in your second script:

theImages
imgSize
p
whichImage

GliderPilot 33 Posting Whiz

12 Years Ago

Correct, don't forget to change your second function call (Line 145) to showImageA()

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jonsan32 12 Junior Poster in Training · Answer 1 · 2014-04-10T03:13:53+00:00

The first. 2 groups of images. Some of the athletes are in a few pictures, and I'm trying to avoid them appearing twice on the same page at the same time.

Thank you for any help you're willing to provide.

jonsan32 12 Junior Poster in Training · Answer 2 · 2014-04-10T04:15:06+00:00

So like...

theImagesx
imgSizex
px
whichImagex

I think I tried that before, but didn't even notice the p until now. If I'm wrong, let me know. I'm gonna go try it out right now. Thanks a ton!

jonsan32 12 Junior Poster in Training · Answer 3 · 2014-04-10T04:32:46+00:00

Awesome! It finally worked. Thanks a ton.

<style type="text/css">
#HTML1, #HTML3, #HTML7{
display:none;
}
.avail td{
border-left:1px #aaaaaa solid;
border-right:1px #aaaaaa solid;
}
.number{
font-size:26px;
font-family:arial;
}
.team{
font-family:arial;
}
.EventLink {
 display: block;
 width: 290px;
 height: 110px;
 background: url('') top;
 text-indent: -99999px;
}
.EventLink:hover {
 background-position: 5px 102px;
}
.DetailsLink {
 display: block;
 width: 290px;
 height: 110px;
 background: url('') top left;
 text-indent: -99999px;
}
.DetailsLink:hover {
 background-position: -10px 112px;
}
.SigninLink {
 display: block;
 width: 290px;
 height: 110px;
 background: url('') top;
 text-indent: -99999px;
}
.SigninLink:hover {
 background-position: 11px 110px;
}
.SignupLink {
 display: block;
 width: 290px;
 height: 110px;
 background: url('') top;
 text-indent: -99999px;
}
.SignupLink:hover {
 background-position: -2px 122px;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
// Set up the image files to be used. 
var theImagesx = new Array();
var imgSizex  = new Array();
// do not change this 
// To add more image files, continue with the
// pattern below, adding to the array.
theImagesx[0] = ''; imgSizex[0]={height:200};
theImagesx[1] = ''; imgSizex[1]={height:200};
theImagesx[2] = ''; imgSizex[2]={height:200};
theImagesx[3] = ''; imgSizex[3]={height:200};
// do not edit anything below this line
var j = 0
var px = theImagesx.length;
var preBuffer = new Array()
for (i = 0; i < px; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImagesx[i]
}
var whichImagex = Math.floor(Math.random()*p);
function showImagex(){
document.write('<img src="',theImagesx[whichImagex],'"',
               ' width="',imgSizex[whichImagex].width,'" "',
               ' height="',imgSizex[whichImagex].height,'">');
}
</script>


<SCRIPT LANGUAGE="JavaScript">
// Set up the image files to be used. 
var theImages = new Array();
var imgSize  = new Array();
// do not change this 
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = ''; imgSize[0]={height:200};
theImages[1] = ''; imgSize[1]={height:200};
theImages[2] = ''; imgSize[2]={height:200};
theImages[3] = ''; imgSize[3]={height:200};
// do not edit anything below this line
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}
var whichImage = Math.floor(Math.random()*p);
function showImage(){
document.write('<img src="',theImages[whichImage],'"',
               ' width="',imgSize[whichImage].width,'" "',
               ' height="',imgSize[whichImage].height,'">');
}
</script>
<center>
<table width="1000" height="400">
<tr>
<td rowspan="2">
<SCRIPT LANGUAGE="JavaScript">
showImagex();
</script>
</td>
<td align="center"><a class="SigninLink" href="http://bookeo.com/50allstars/customer">Sign-in</a></td>
<td align="center"><a class="SignupLink" href="http://bookeo.com/50allstars/signup">Sign-up</a></td>
<td rowspan="2">
<SCRIPT LANGUAGE="JavaScript">
showImage();
</script>
</td>
</tr>
<tr>
<td align="center"><a class="EventLink" href="http://www.50allstars.com/p/workouts.html">Events</a></td>
<td align="center"><a class="DetailsLink" href="http://www.50allstars.com/p/details.html">Details</a></td>
</tr>
</table><br><br><br><br>
<table width="1000" height="200">
<tr><td width="450" align="center">
<table width=100%><tr><td align="center" style="background-color:#FFFFFF; color:#000000; 
padding:4px 4px 4px 4px; letter-spacing:9px; font-size:16px; font-family:arial; font-weight:bold; word-spacing:4px;">
TEAM SPOTS AVAILABLE
</td></tr><tr><td>
<table width=100% cellpadding=2 cellspacing=0 class="avail"><tr>
<td align="center"><span class="team">hs boys</span><br><span class="number">6</span></td>
<td align="center"><span class="team">hs girls</span><br><span class="number">7</span></td>
<td align="center"><span class="team">ms boys</span><br><span class="number">1</span></td>
<td align="center"><span class="team">ms girls</span><br><span class="number">5</span></td>
<td align="center"><span class="team">elem boys</span><br><span class="number">7</span></td>
<td align="center"><span class="team">elem girls</span><br><span class="number">19</span></td>
</tr></table>
</td></tr></table>
</td><td align="RIGHT">
<font style="font-size:17px; font-family:arial; color:#444444; letter-spacing:5px; word-
spacing:4px;">email us anytime<BR><a href="mailto:staff@50allstars.com" style="color:#000000; 
text-decoration:none;"><B>staff@50allstars.com</B></a></font> 
</td></tr></table>
</center>

jonsan32 12 Junior Poster in Training · Answer 4 · 2014-04-10T04:46:21+00:00

Sorry, guess it worked in my editor... but not on my page. I've since renamed both by adding z to one set and x to the other on all the variables you mentioned. If you get a sec and can see what I've done wrong, please let me know.

Thank you either way. You've taught me a great deal. Have a great day.

<style type="text/css">
#HTML1, #HTML3, #HTML7{
display:none;
}
.avail td{
border-left:1px #aaaaaa solid;
border-right:1px #aaaaaa solid;
}
.number{
font-size:26px;
font-family:arial;
}
.team{
font-family:arial;
}
.EventLink {
 display: block;
 width: 290px;
 height: 110px;
 background: url('') top;
 text-indent: -99999px;
}
.EventLink:hover {
 background-position: 5px 102px;
}
.DetailsLink {
 display: block;
 width: 290px;
 height: 110px;
 background: url('') top left;
 text-indent: -99999px;
}
.DetailsLink:hover {
 background-position: -10px 112px;
}
.SigninLink {
 display: block;
 width: 290px;
 height: 110px;
 background: url('') top;
 text-indent: -99999px;
}
.SigninLink:hover {
 background-position: 11px 110px;
}
.SignupLink {
 display: block;
 width: 290px;
 height: 110px;
 background: url('') top;
 text-indent: -99999px;
}
.SignupLink:hover {
 background-position: -2px 122px;
}
</style>



<center>
<table width="1000" height="400">
<tr>
<td rowspan="2" width="150">

<SCRIPT LANGUAGE="JavaScript">
// Set up the image files to be used. 
var theImagesx = new Array();
var imgSizex  = new Array();
// do not change this 
// To add more image files, continue with the
// pattern below, adding to the array.
theImagesx[0] = ''; imgSizex[0]={height:200};
theImagesx[1] = ''; imgSizex[1]={height:200};
theImagesx[2] = ''; imgSizex[2]={height:200};
theImagesx[3] = ''; imgSizex[3]={height:200};
// do not edit anything below this line
var j = 0
var px = theImagesx.length;
var preBuffer = new Array()
for (i = 0; i < px; i++){
   preBuffer[i] = new Imagex()
   preBuffer[i].src = theImagesx[i]
}
var whichImagex = Math.floor(Math.random()*px);
function showImagex(){
document.write('<img src="',theImagesx[whichImagex],'"',
               ' width="',imgSizex[whichImagex].width,'" "',
               ' height="',imgSizex[whichImagex].height,'">');
}
</script>

<SCRIPT LANGUAGE="JavaScript">
showImagex();
</script>

</td>
<td align="center"><a class="SigninLink" href="http://bookeo.com/50allstars/customer">Sign-in</a></td>
<td align="center"><a class="SignupLink" href="http://bookeo.com/50allstars/signup">Sign-up</a></td>
<td rowspan="2" width="150">


<SCRIPT LANGUAGE="JavaScript"> 
// Set up the image files to be used. 
var theImagesz = new Array();
var imgSizez  = new Array();
// do not change this 
// To add more image files, continue with the
// pattern below, adding to the array.
theImagesz[0] = ''; imgSizez[0]={height:200};
theImagesz[1] = ''; imgSizez[1]={height:200};
theImagesz[2] = ''; imgSizez[2]={height:200};
theImagesz[3] = ''; imgSizez[3]={height:200};
// do not edit anything below this line
var j = 0
var pz = theImagesz.length;
var preBuffer = new Array()
for (i = 0; i < pz; i++){
   preBuffer[i] = new Imagez()
   preBuffer[i].src = theImagesz[i]
}
var whichImagez = Math.floor(Math.random()*pz);
function showImagez(){
document.write('<img src="',theImagesz[whichImagez],'"',
               ' width="',imgSizez[whichImagez].width,'" "',
               ' height="',imgSizez[whichImagez].height,'">');
}
</script>
<SCRIPT LANGUAGE="JavaScript">
showImagez();
</script>


</td>
</tr>
<tr>
<td align="center"><a class="EventLink" href="http://www.50allstars.com/p/workouts.html">Events</a></td>
<td align="center"><a class="DetailsLink" href="http://www.50allstars.com/p/details.html">Details</a></td>
</tr>
</table><br><br><br><br>
<table width="1000" height="200">
<tr><td width="450" align="center">
<table width=100%><tr><td align="center" style="background-color:#FFFFFF; color:#000000; 
padding:4px 4px 4px 4px; letter-spacing:9px; font-size:16px; font-family:arial; font-weight:bold; word-spacing:4px;">
TEAM SPOTS AVAILABLE
</td></tr><tr><td>
<table width=100% cellpadding=2 cellspacing=0 class="avail"><tr>
<td align="center"><span class="team">hs boys</span><br><span class="number">6</span></td>
<td align="center"><span class="team">hs girls</span><br><span class="number">7</span></td>
<td align="center"><span class="team">ms boys</span><br><span class="number">1</span></td>
<td align="center"><span class="team">ms girls</span><br><span class="number">5</span></td>
<td align="center"><span class="team">elem boys</span><br><span class="number">7</span></td>
<td align="center"><span class="team">elem girls</span><br><span class="number">19</span></td>
</tr></table>
</td></tr></table>
</td><td align="RIGHT">
<font style="font-size:17px; font-family:arial; color:#444444; letter-spacing:5px; word-
spacing:4px;">email us anytime<BR><a href="mailto:staff@50allstars.com" style="color:#000000; 
text-decoration:none;"><B>staff@50allstars.com</B></a></font> 
</td></tr></table>
</center>

GliderPilot 33 Posting Whiz · Answer 5 · 2014-04-10T05:03:41+00:00

Line 81 and 118, the new Image() is a function, remove the x and z from that function call

jonsan32 12 Junior Poster in Training · Answer 6 · 2014-04-10T05:30:55+00:00

jonsan32 12 Junior Poster in Training

12 Years Ago

Success. Thanks for the billionth time :-)

Two random arrays on same page?

Dani AI

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers