IF Statement [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : IF Statement

jonnyheald

11-30-2004, 05:43 PM

I apologize for maybe the ease of this quetion, but im new to javascript.

What i have is a random number generator that gives me either 1,2,3,4,5 or 6 and i want to know how to display an image for each of the posibilities

if that makes sense?

cheers

jon

JPnyc

11-30-2004, 05:48 PM

You put the images into an array, then set the value of the array index, just use i, to the output of the number generator, and then the src attribute of the img tag = to arrayName[i];

jonnyheald

11-30-2004, 05:51 PM

where do i declare my array? and how

what code would i write? i apologise again, but im quite new to this!

p80

11-30-2004, 05:56 PM

where you put it depends on how your going to use it. but the array syntax is simple enough

var myArray = new Array();
myArray[0] = "pic1";
myArray[1] = "pic2";
ect...

jonnyheald

11-30-2004, 06:00 PM

Originally posted by p80
where you put it depends on how your going to use it. but the array syntax is simple enough

var myArray = new Array();
myArray[0] = "pic1";
myArray[1] = "pic2";
ect...

so i dont need an if statement?

also how do i apply this to my random number generator?

cheers for your help

p80

11-30-2004, 06:13 PM

if you where going to call this in a function, you may do someting like this, and no you shouldnt' need a conditional.

function changePic(){
var myPics = new Array();
myPics[0] = "pic1";
myPics[1] = "pic2";
myPics[3] = "pic3";
var i = (math.floor(math.random()*3)+1);
document.myImage.src = myPic[i];
}

havent' tired this, but it should work just fine. now you just need to call this function when you want the pic to change

jonnyheald

11-30-2004, 06:18 PM

Originally posted by p80
if you where going to call this in a function, you may do someting like this, and no you shouldnt' need a conditional.

function changePic(){
var myPics = new Array();
myPics[0] = "pic1";
myPics[1] = "pic2";
myPics[3] = "pic3";
var i = (math.floor(math.random()*3)+1);
document.myImage.src = myPic[i];
}

havent' tired this, but it should work just fine. now you just need to call this function when you want the pic to change

cheers, this is completely different to what i had

i delclared the random number individually, and as a test displayed them as text in a document.write

is there no easier way to just say if the random number = 1 display a image

your methods a lot shorter, i would like to use it.

but what i want is to display 4 images, each could be either 1to6 (these are pictures stored as dice images)

p80

11-30-2004, 06:27 PM

np, if you have 4 img tags each with a unique id, just pass that id to the function as a paramater*?sp?*

might look someting like this

function changePic(myImage){
var myPics = new Array();
myPics[0] = "pic1";
myPics[1] = "pic2";
myPics[3] = "pic3";
var i = (math.floor(math.random()*3)+1);
document.myImage.src = myPic[i];
}

//then when you call the function

changePic("img1");

this may not work, I've been haveing trouble lately with assigning id's to variables, you may have to use this instead

document.getElementById(myImage).src = myPic[i];
//in place of
document.myImage.src = myPic[1];

I'm prety shure one of those will work, probly the getElementById version

jonnyheald

11-30-2004, 06:31 PM

where abouts would i assign my array items to images saved on my drive

and how would i call on the function in the body to get it to display one my random number has been generated?

i apretiate the help mate

p80

11-30-2004, 06:37 PM

I would just make my array inside the function like I showed you. as far as when to call the function, that depends on when you want to change the image. just make shrue you do it after you declare the img tag.

if it's a dice roll, maby you want it on a button, so you would just add an onClick = "changePic('imgID')";

or if you want to do it when the page loads just put it in some script tags at the bottom of your page.

Charles

11-30-2004, 06:41 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<script type="text/javascript">

</script>

</head>
<body>
<div><img alt="[Bettie Page]" id="bettie" onmouseover="this.src = bettie.random()" src="http://www.bettiepage.com/images/photos/bikini/bikini1.jpg"></div>
</body>
</html>

jonnyheald

11-30-2004, 06:59 PM

<html>
<head>
<title>Assignment</title>
<script language="JavaScript">
function changePic(myImage){
var myPics = new Array();
myPics[0] = "pic1.gif";
myPics[1] = "pic2.gif";
myPics[2] = "pic3.gif";
myPics[3] = "pic4.gif";
myPics[4] = "pic5.gif";
myPics[5] = "pic6.gif";
var i = (math.floor(math.random()*6)+1);
document.myImage.src = myPic[i];
}
</script>
</head>

<body>
<script language="JavaScript">
<button onClick = "changePic('imgID')";
</script>
</body>
</html>

What would i need to add to that?

Charles

11-30-2004, 07:03 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<script type="text/javascript">

</script>

</head>
<body>
<div><img alt="[Bettie Page]" src="http://www.bettiepage.com/images/photos/bikini/bikini1.jpg" style="display:block; margin:auto">
<button onclick="document.images[document.images.length-1].src = bettie.random()" style="display:block; margin:auto">Random Bettie</button></div>
</body>
</html>

JPnyc

11-30-2004, 07:04 PM

Well for starters, what you have there won't give you anything but an 'myPic is undefined' error. You named your array myPicS, but you set the source = to myPic[i] (no S).

p80

11-30-2004, 07:11 PM

duh, how silly of me

jonnyheald

11-30-2004, 07:13 PM

Originally posted by Charles
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<script type="text/javascript">

</script>

</head>
<body>
<div><img alt="[Bettie Page]" src="http://www.bettiepage.com/images/photos/bikini/bikini1.jpg" style="display:block; margin:auto">
<button onclick="document.images[document.images.length-1].src = bettie.random()" style="display:block; margin:auto">Random Bettie</button></div>
</body>
</html>

so to add my pics all id need to do is write the location of my pics on my hard-drive instead of the website urls?

Charles

11-30-2004, 07:16 PM

If this is just for local use then yes. And you'll find that my method makes it really simple to add images. Though, if you get too many of them you'll want to use the long form for creating the Array.

jonnyheald

11-30-2004, 07:19 PM

it doesnt display the image from my image

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<script type="text/javascript">

</script>

</head>
<body>
<div><img alt="[Bettie Page]" src="C:\Documents and Settings\HP Authorized Custom\My Documents\My Pictures\1.bmp" style="display:block; margin:auto">
<button onclick="document.images[document.images.length-1].src = bettie.random()" style="display:block; margin:auto">Random Bettie</button></div>
</body>
</html>

Charles

11-30-2004, 07:22 PM

Try any or all of the following:

* using relative file paths;
* prepending a "file:///" to the file path;
* replacing each space in the file path with a "%20".

jonnyheald

11-30-2004, 07:27 PM

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<script type="text/javascript">

</script>

</head>
<body>
<div><img alt="[Bettie Page]" src="file:///C:\Documents%20and%20Settings\HP%20Authorized%20Custom\My%20Documents\My%20Pictures\1.bmp" style="display:block; margin:auto">
<button onclick="document.images[document.images.length-1].src = bettie.random()" style="display:block; margin:auto">Random Bettie</button></div>
</body>
</html>

i tried this

and still no luck

Charles

11-30-2004, 07:30 PM

Perhaps because you are prepending a "file:/// " and not a "file:///". The difference is a trailling space. My version works fine and there is no way that I can trouble shoot your's short of networking, so you're on your own from here. Forget about the JavaScript part for a while; once you can display one image the rest will follow.

JPnyc

11-30-2004, 07:35 PM

If it's for local use, just put everything in the same folder and use local addressing.

jonnyheald

11-30-2004, 07:46 PM

Originally posted by DUNSEL
If it's for local use, just put everything in the same folder and use local addressing.

ive tried, it wont display it

also ive tried putting in other random images from other web sites and this doesnt seem to work either

JPnyc

11-30-2004, 07:55 PM

If it doesn't display, there's an error in the code. It HAS to.

Charles

11-30-2004, 08:05 PM

Cut and paste my example exactly as it is and give it a try. Once you have that working then start making changes, one at a time and testing as you go.

jonnyheald

11-30-2004, 08:07 PM

Originally posted by Charles
Cut and paste my example exactly as it is and give it a try. Once you have that working then start making changes, one at a time and testing as you go.

your version works

but ANY other image i include doesnt

Charles

11-30-2004, 08:10 PM

Originally posted by jonnyheald
your version works

but ANY other image i include doesnt Then you are doing something wrong. Please post an example.

jonnyheald

11-30-2004, 08:24 PM

Originally posted by Charles
Then you are doing something wrong. Please post an example.

ok, sorry it does work, i was being a pain in the arse

one thing though

how do i get it to return a value, either the 1,2,3,4,5 or 6?

Charles

11-30-2004, 08:31 PM