Random image on click script

**james438** · 11-27-2009, 04:49 AM

Hi,

I have a script that works. When I load the page a random image will be displayed and when I click a button the next random image will be displayed and it will cycle through. It works just fine. I added a bit of script to display the location in a small textarea underneath the image and it works too, but nothing is displayed in the textarea when the page first loads. Can you point out what I need to change to get it to display the location when the page first loads? I have been looking all over and just can't seem to figure this out. I am also very new to javascript. In fact this is the first script I have written in the language, so I am a bit new to this.

Code:

<script type="text/javascript">
var img=new Array(<?php echo "$Statss";?>)
function newi()
{
if   (++Num>3) Num=0;
if  (Num==0) {document.getElementById("img").innerHTML='<img src=images/screenshots/'+img[Num]+' width=135px height=135px>';}
else {document.getElementById("img").innerHTML='<img src=images/screenshots/'+img[Num]+' width=135px height=135px>'+Num;
}
var newtext = 'img[Num]';
document.myform.outputtext.value = newtext;
}
var Num =1;
</script>
<div id="img">
<script type="text/javascript">
newi(0);
</script>
</div>
<br><br><button onClick="newi()">different image</button>
<form name="myform">
<td><textarea name="outputtext"></textarea></td>
</form>

I left out the php as it is irrelevant. Oh, and if you see any useless code that I can remove I would be happy to learn of it, thanks. The conditional statements seem somewhat different than in PHP.

**vwphillips** · 11-27-2009, 10:05 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<script type="text/javascript">
var img=new Array('One.gif','Two.gif','Three.gif','Four.gif');
var Num =1;

function newi(){
 if   (++Num>3) Num=0;
 if  (Num==0) {
  document.getElementById("img").innerHTML='<img src=http://www.vicsjavascripts.org.uk/StdImages/'+img[Num]+' width=135px height=135px>';
 }
 else {
  document.getElementById("img").innerHTML='<img src=http://www.vicsjavascripts.org.uk/StdImages/'+img[Num]+' width=135px height=135px>'+Num;
 }
 document.myform.outputtext.value = img[Num]t;
}
</script>
<div id="img">
</div>
<br><br><button onClick="newi()">different image</button>
<form name="myform">
<td><textarea name="outputtext" cols=100 ></textarea></td>
</form>
<script type="text/javascript">
newi();
</script>
</body>

</html>

**jscheuer1** · 11-27-2009, 11:13 AM

Doesn't look random to me unless $Statss (is that a typo, did you mean $States ?) is already made random on the server side. Though random with 3 items isn't a big deal, it will be the same order more often than not most likely. This code will not do what you say it does:

Code:

var newtext = 'img[Num]';
document.myform.outputtext.value = newtext;

It will output the literal string assigned to newtext, not any image name. To arbitrarily assume the array length will be 3 is questionable. There is a lot of global exposure, only the function name need be exposed globally, actually not even that, but the code involved to eliminate it from the global scope is perhaps not justified here. The innerHTML property is non-standard, and really unnecessary here. Both rows and cols are required for a valid textarea tag, you could probably do with a text input here. For strict validation, inline elements should be inside block level elements other than the body tag or forms, your td tags were completely invalid - no table. But the real issue, the answer to your main question is that when the code runs the first time, the output textarea doesn't exist yet.

Now, the least amount of code packed together as tightly as possible isn't always the best thing, almost never is. Efficiency in execution and preservation of the global scope are both more important. Scripts may always be minified and made external later if you want packed code, but only if they are written clearly and properly to begin with.

So, though probably not perfect, and not even tested, this shows a big improvement in all or at least most of the points I mentioned:

Code:

<div>
<img id="img" src="" style="width:135px; height:135px; visibility: hidden;" alt="">
</div>
<div>
<br><br><button onclick="newi();">different image</button>
</div>
<form name="myform">
<div><textarea name="outputtext" cols=30 rows=1></textarea></div>
</form>
<script type="text/javascript">
function newi(){
	if(newi.Num > newi.ar.length - 1){
		newi.Num = 0;
		newi.img.src = 'images/screenshots/' + newi.ar[newi.Num];
	}
	else{
		newi.img.src = 'images/screenshots/' + newi.ar[newi.Num];
	}
	newi.output.value = newi.ar[++newi.Num];
}
newi.Num = 1;
newi.ar = new Array(<?php echo "$Statss"; ?>);
newi.img = document.getElementById('img');
newi.output = document.forms.myform.elements.outputtext;
newi.img.onload = function(){
	newi.img.style.visibility = 'visible';
	newi.img.onload = null;
}
newi();
</script>

If there are any problems with it executing properly, which is possible because it is untested, they should be easy enough to work out.

Notes: All of the above remarks are directed at the original code. I have not looked in detail at Vic's code. The markup assumes a valid page to HTML 4.01 strict. The image tag should be given a default source attribute then its style should not include visibility hidden, and this bit may be dropped:

Code:

newi.img.onload = function(){
	newi.img.style.visibility = 'visible';
	newi.img.onload = null;
}

**james438** · 11-29-2009, 08:17 PM

This is a bit of a later response, but I was away for the holidays. You were right, $Statss is sort of a typo, but I figured I'd fix that later. $Statss was randomized server side. I wanted to post only the relevant code so as to minimize the chance that my question would be passed over. The reason I used a very small array of only 3 or 4 was to make debugging a little easier. In this case it helped since I found one bug where ++newi.Num should have been placed before the conditional statements.

I was not very concerned with validation at this point as it was my goal to get a working code first before cleaning it up with the proper syntax. I am not sure what you mean by global exposure. I have a lot to read yet about javascript before I feel comfortable creating many programs on my own. Your comments were really helpful.

later

**jscheuer1** · 11-29-2009, 10:47 PM

Global exposure happens when you declare a variable or a function outside of any function or other object. Global exposure can also happen within a function when you declare a variable without using the var keyword.

Whenever something is exposed globally there is always a chance that it will be overwritten by another script or that it will overwrite something in another script. In IE (always) and possibly others if your HTML code is invalid there is an added peril that, via the archaic document.all collection, a variable in the global scope that isn't declared with the var keyword can be overwritten by an element with an id or name that uses the same word as the variable. There is no need to expose anything globally, though it is the easiest way to make a value or function available to all other values and functions. It is by this very global availability though that these values and functions become susceptible both to being overwritten and to potentially overwriting other global values or function from other code.

If you look over my code from my previous post you may be able to see that I've dealt with this issue by placing only the newi function in the global scope. All other values that one might be tempted to place in the global scope are instead assigned and accessed as properties of the newi function.

This is about the simplest way to limit global exposure while still having access to the various values from your code, or if need be, from other code. There are many other methods, and this particular one is not all that well suited to long and/or complex code.

Edit: I just corrected a possible glitch in my code from my previous post adding the highlighted:

Code:

if(newi.Num > newi.ar.length - 1){

This will in all likelihood be required to avoid an error.

Thread: Random image on click script

Thread Tools

Search Thread

Random image on click script

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions