Forum Moderators: open
var id = '12345';
var email = 'better_phrased_questions@example.com';
:-)
OK now that I've had my fun, the simplest way of getting a unique number is to use the date object:
var day = new Date();
var id = day.getTime();
alert(id);
. . . unless you need to use it multiple times on each page, then you can use the random method:
var id=Math.round(Math.random())*2500;
Where id would be an integer between 0 and 2500.
Ok it seems like the best way to test something would be second timer.
So first the array
arr = new Array(
["http://www.google.com/.jpg"],
["http://www.google.com/.jpg"]
);
then one image only but in brackets in case I need to add more later.
function change(){
document.getElementById("img").src = arr[new Date().getSeconds()][0]
setTimeout('changeImg()',1000)
}
How would I add a random function to this so that it gets the items randomly instead of in order? Please let me know, thank you very much.
Body
<img id="img" />
var counter = 0;
function change()
{ document.getElementById("img").src = arr[counter][0]
if (counter == arr.length)
{counter = 0; } setTimeout('change()', 1000)}
Umm I screwed up and had my number outside the bracket, so have posted a tested sample below (oops :-\)
The main problem is a random with only 5-10 items is not going to appear all that random. The way to work around this is to store "last item" in a variable so that it keeps re-choosing until the new pick doesn't match. Run the below page as is then uncomment and recomment as necessary.
A side note, 1000=1 second, if you're doing this with images I would suggest as much as 5 seconds.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Random Images</title>
<script type="text/javascript">
var lastImg="0";
arr = new Array("img1.jpg","img2.jpg","img3.jpg", "img4.jpg","img6.jpg","img6.jpg");
function change(){
var randNum = getRand();
//alert('n ' + randNum + ' ar ' + arr[randNum]);
//document.getElementById("img").src = arr[randNum];
document.getElementById("img").value = arr[randNum];
setTimeout('change()',2000);
}
function getRand () {
var rnum;
var id=Math.round(Math.random()*(arr.length-1));
rnum = id;
if (rnum==lastImg) { rnum = getRand(); }
lastImg=rnum;
return rnum;
}
</script>
</head>
<body onLoad="change();">
<form>
<input type="text" name="img" id="img" value="">
</form>
<!-- <img src="img1.jpg" name="img" id="img"> -->
</body>
</html>
I hope you didn't go to a lot of work, I only had two images in there as an example on but planned on listing several. So hope you didn't have to come up with too much on your random variables.
Thank you very much. I don't know though for some reason the images aren't appearing. This is the one I kept in the body, can you see anything wrong with it? Thankyou.
<body onLoad="change();">
<img id="img"/>
I don't know though for some reason the images aren't appearing.
<img id="img"/>
First your img element doesn't have a src attribute, it will probably assign it anyway but to be safe, and also you want an image to load initially,
<img id="img" src="img1.jpg">
I bet your great at parties and definitely great with the ladies.
I had to get rid of these for it to work. //
Look again at the original: those are comments, as are the <!-- --> in the HTML.
In the code as posted, the uncommented line
document.getElementById("img").value = arr[randNum];
sets a VALUE attribute in the form's text field I've ID'ed as "img." The img element doesn't have a value attribute, it has a "src" atribute. In your final version, you want to uncomment those lines, comment or remove the ones referring to the form, like this:
document.getElementById("img").src = arr[randNum];
//document.getElementById("img").value = arr[randNum];
and
<!-- <form>
<input type="text" name="img" id="img" value="">
</form> -->
<img src="img1.jpg" name="img" id="img">
When I try it with a larger array it looks like a few the same items seem to get chosen a lot more than the rest.
It's just how random works, the only way I can think of is to store ALL the numbers picked in yet another array and flush it out when it gets full.
Right now it guards against the last item picked being picked next. When you choose an item, you stuff it in an array. The next time it chooses an item, it checks against all the items in the "used" array and keeps rechoosing until it finds one that isn't in the used array, then adds it to the used array and displays it. When the used array gets to the same length as your base array, flush it out. You have to be careful with this stuff as you can get it stuck in a loop.
Another approach is to dispense with random altogether and just show the items in the order they are in the base array. :-)
The next time it chooses an item, it checks against all the items in the "used" array and keeps rechoosing until it finds one that isn't in the used array, then adds it to the used array and displays it. When the used array gets to the same length as your base array, flush it out.
I went ahead and hacked together this feature using two arrays. Each time it selects a random item it loads it into the second array. When the first array is empty, it dumps the values back into the original array.
I also approached the problem of repeating values from a different perspective (using a while loop in the main function instead of a recursive function).
This code still needs to be modified to point to the .src of the image instead of the .value of the input, but that should be pretty straightforward. :)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Random Images</title>
<script type="text/javascript">
arr1 = new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg","img6.jpg");
arr2 = new Array();
function change(){
//alert('n ' + randNum + ' ar ' + arr[randNum]);
if(arr1.length == 0){
arr1 = arr2;
delete arr2;
arr2 = new Array();
}
var randNum = getRand();
while(document.getElementById("img").value==arr1[randNum]){
var randNum = getRand();
}
document.getElementById("img").value = arr1[randNum];
arr2.push(arr1[randNum]);
arr1.splice(randNum,1);
setTimeout('change()',2000);
}
function getRand () {
var rnum;
if(arr1.length==1)
return '0';
var id=Math.round(Math.random()*(arr1.length-1));
return id;
}
</script>
</head>
<body onLoad="change();">
<form>
<input type="text" name="img" id="img" value="">
</form>
<!-- <img src="img1.jpg" name="img" id="img"> -->
</body>
</html>
