...

View Full Version : Javascript: multiple values from array



Sha66y
09-23-2011, 08:12 PM
I have the following script that currently returns 4 of the same images. I can't wrap my head around how to get it to return 4 random images (out of the 7 in this example)? Also the links aren't working?

---


var imagenumber = 7 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;

images= new Array
images[1] = "image1.jpg"
images[2] = "image2.jpg"
images[3] = "image3.jpg"
images[4] = "image4.jpg"
images[5] = "image5.jpg"
images[6] = "image6.jpg"
images[7] = "image7.jpg"
var image = images[rand1]

links= new Array
links[1] = "link1.html"
links[2] = "link2.html"
links[3] = "link3.html"
links[4] = "link4.html"
links[5] = "link5.html"
links[6] = "link6.html"
links[7] = "link7.html"
var link = links[rand1]

document.write('<div id="image-1"><a href="' + link + '"><img src="' + image + '"></a></div><div id="image-2"><a href="' + link + '"><img src="' + image + '"></a></div><div id="image-3"><a href="' + link + '"><img src="' + image + '" border="0"></a></div><div id="image-4"><a href="' + link + '"><img src="' + image + '"></a></div>')

---
Any help would be greatly appreciated!

blaze4218
09-23-2011, 08:17 PM
images= []
images[1] = "image1.jpg"
images[2] = "image2.jpg"
images[3] = "image3.jpg"
images[4] = "image4.jpg"
images[5] = "image5.jpg"
images[6] = "image6.jpg"
images[7] = "image7.jpg"

var rand1 = Math.floor(Math.random()*images.length))

var image = images[rand1]

Sha66y
09-23-2011, 08:24 PM
Thanks Blaze - I REALLY appreciate the quick reply :thumbsup:

Your response is maybe too brief for me - Javascript is not exactly my strong suit. Can you look at my initial code and tell me if I have anything unnecessary or otherwise holding me back from what I need to accomplish?

blaze4218
09-23-2011, 08:25 PM
oh, I misunderstood...



function getImage(){
var imagenumber = 7 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;

images= new Array
images[1] = "image1.jpg"
images[2] = "image2.jpg"
images[3] = "image3.jpg"
images[4] = "image4.jpg"
images[5] = "image5.jpg"
images[6] = "image6.jpg"
images[7] = "image7.jpg"
var image = images[rand1]

links= new Array
links[1] = "link1.html"
links[2] = "link2.html"
links[3] = "link3.html"
links[4] = "link4.html"
links[5] = "link5.html"
links[6] = "link6.html"
links[7] = "link7.html"
var link = links[rand1
}

for (i=0; i<4 ; i++){
getImage();
document.write('<div id="image-1"><a href="' + link + '"><img src="' + image + '"></a></div><div id="image-2"><a href="' + link + '"><img src="' + image + '"></a></div><div id="image-3"><a href="' + link + '"><img src="' + image + '" border="0"></a></div><div id="image-4"><a href="' + link + '"><img src="' + image + '"></a></div>')
}

I thought you were having trouble with the random number generation...

blaze4218
09-23-2011, 08:27 PM
yeah, you needed you reset the random number generation each time. then create a loop writing your image with each random number.

Sha66y
09-23-2011, 08:36 PM
This is really close to what I was working on about an hour ago - for (i=0; i<4 ; i++){

But it's still not bringing up the four random images/links. Not sure if it's in the document.write statement or what - something is amiss. I get four of the same image with the original code I posted. With this code nothing appears at all?

All the syntax checks-out (I added ']' to var link = links[rand1]).

Any idea of the document.write block is hosed or something else maybe? Thanks again, I know why you go by 'blaze' - very fast :)

blaze4218
09-23-2011, 08:42 PM
actually I just encapsulated your entire code in one function, so technically you would get 16 img's



images = [ "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg", "image7.jpg"] //Setup your array

links = [ "link1.html", "link2.html", "link3.html", "link4.html", "link5.html", "link6.html", "link7.html"]//Setup your array

function getImage(){
var rand1 = Math.floor(Math.random()*images.length) //This sets your max number to the length of your array, so you don't have to change that var every time you add to the array (just change the array!)
link = links[rand1] // I removed the "var" here because that prevents you from accessing it outside of getImage()
image = images[rand1] // I removed the "var" here because that prevents you from accessing it outside of getImage()
}

for (i=0; i<4 ; i++){
getImage()
document.write('<div id="image-' + i + '"><a href="' + link + '"><img src="' + image + '"></a></div>')
}

Also, typo in my last response is fixed here

xelawho
09-23-2011, 08:43 PM
I know this is going to mess things up a little, but can I point out that arrays start at 0, making the first object of those arrays undefined.

which may not be bad, but it can't be good...

blaze4218
09-23-2011, 08:45 PM
I know why you go by 'blaze' - very fast :)
nickname from when I was a kid actually, total pyro --TMI?
I actually have another pen-name for video games for when I use a *fast* character class "Blitz" :cool:

blaze4218
09-23-2011, 08:47 PM
@xelawho mine? how so? the "white space" is ignored by javascripts parser

Sha66y
09-23-2011, 08:51 PM
Blaze - you are brilliant! Thank you! All four images showing up now randomly. I get some dupes out of the 4 - something I didn't even ponder. :confused:

blaze4218
09-23-2011, 08:52 PM
You can prevent that

Sha66y
09-23-2011, 08:52 PM
nickname from when I was a kid actually, total pyro --TMI?
I actually have another pen-name for video games for when I use a *fast* character class "Blitz" :cool:

I know a guy nicked-named Gas because he drank gas as a kid - true story. You and him maybe shouldn't meet ;)

xelawho
09-23-2011, 08:55 PM
no, you were too fast for me, too :D this was back when you were assigning positions to objects: images[1] = "image1.jpg"

etc

blaze4218
09-23-2011, 08:58 PM
oh, lol, yeah that was just cut and paste of his code

blaze4218
09-23-2011, 09:01 PM
images = [ "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg", "image7.jpg"] //Setup your array

links = [ "link1.html", "link2.html", "link3.html", "link4.html", "link5.html", "link6.html", "link7.html"]//Setup your array

dontUse=[];

function getImage(){
var rand1 = Math.floor(Math.random()*images.length) //This sets your max number to the length of your array, so you don't have to change that var every time you add to the array (just change the array!)
link = links[rand1] // I removed the "var" here because that prevents you from accessing it outside of getImage()
image = images[rand1] // I removed the "var" here because that prevents you from accessing it outside of getImage()

for(j in dontUse){
if (dontUse[j]==rand1)getImage()
}
dontUse.push(rand1)

}

for (i=0; i<4 ; i++){
getImage()
document.write('<div id="image-' + i + '"><a href="' + link + '"><img src="' + image + '"></a></div>')
}

Sha66y
09-23-2011, 09:05 PM
Dude, you're the best! Thank you!

Sha66y
09-23-2011, 09:11 PM
Something broke - no links? :(

blaze4218
09-23-2011, 09:13 PM
really? works for me... let me see your code?
Edit:
Also, what browser? (Not that it should matter, just trying to replicate the issue...)

Sha66y
09-23-2011, 09:20 PM
Agh - my bad blaze! Totally works. I added something elsewhere and sloppily forgot to close a tag properly. I think it's maybe time I got my weekend on early ;)

Sha66y
01-05-2012, 02:26 PM
It seems the following line causes a stack overflow error in IE8...

if (dontUse[j]==rand1)getImage()

I tried to resolve it, but my Javascript skills are apparently not up to snuff. Any idea how to resolve the issue? I imagine there's a loop somewhere causing a memory issue of some sort, but not sure how to fix it.

Thanks!

blaze4218
01-12-2012, 07:36 PM
Honestly, I'm wary to call a function from within itself to begin with, that can always run the risk of a stack overflow if there is anything that gets in the way of your test from resolving to false... but your example seemed simple enough, and it worked after all...
I gotta say, it looks like I was trying to get away with as little effort as possible... this one should solve your stack overflow, just to be sure I included a fail-safe.


function getImages(iterations){

var dontUse=[] , // Set your vars
Images = [ "image1.jpg" , "image2.jpg" , "image3.jpg" , "image4.jpg" , "image5.jpg" , "image6.jpg" , "image7.jpg"] ,
Links = [ "link1.html" , "link2.html" , "link3.html" , "link4.html" , "link5.html" , "link6.html" , "link7.html"] ,
HTMLString = '' ,
i = 0 ,
stopAll = 0;

while (i<iterations) {
stopAll++;
if (stopAll == 100)
break; /* This is our fail-safe in case someone tries to call our function with more images than are in the array,
or anything else goes wrong... you can increase this number if you have a lot of images to display. Also
if you are getting less images displayed than you expect, this number might be too low. A good number is probably
2x the number of images in the array (you could even use (2*Images.length) if you don't care about
the extremely unlikely event that you will get too few images and are more concerned about errors and reuse.
After all if you used (2*Images.length) you wouldn't have to update the function later.)*/

var rand = Math.floor(Math.random()*Images.length); // Random number between 0 and however many images

for (var j = 0 ; j<dontUse.length ; ++j) { // Check all previously used random numbers against this one to see if you used it already
if (dontUse[j]==rand) {
rand = false; // We don't want this one...
}
}

if (rand===false) { // Make sure you have 3 equal signs, otherwise the first image could resolve to "falsey" in some browsers and never show...
continue; // Stop loop execution and return to beginning of loop
}

HTMLString += '<div id="image-' + i + '"><a href="' + Links[rand] + '"><img src="' + Images[rand] + '"></a></div><br>'; // Build your string before writing it, this will save you debugging, as well as execute faster...

dontUse.push(rand);
i++;
}
return HTMLString ;
}

document.write(getImages(4)) // Call the function with how many images you want as the argument


also, you should consider not using document.write... as long as you don't try to use it after the page loads it shouldn't hurt, I just don't want to be remiss.
you could instead do something like:


<div id="ImageLinkPlaceHolder"></div>
<script>
document.getElementById('ImageLinkPlaceHolder').innerHTML = getImages(4);
</script>

Sha66y
01-13-2012, 08:09 PM
Blaze, you are amazing. Thank you again - no dupes and no stack overflows!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum