Announcement

**venegal** · Apr 15, 2009, 08:05 PM

There are many things wrong here, but the two things that are really breaking your code are the following:

With if (document.search.gender[i].value="male") you are assigning the value "male" instead of checking it. The return value will be "male" and thus always true. Use "==" instead of "=".

"elseif" does not exist in JS. Use "else if".

**Old Pedant** · Apr 16, 2009, 12:29 AM

In any case, you have a bunch of redundant code in there.

For example, change

Code:

for (i=0; i<document.search.gender.length; i++) 

      {
         if (document.search.gender[i].checked==true)
         {
            gender =document.search.gender[i].value;
			if (document.search.gender[i].value="male")
			{ alert(male) }
			elseif (document.search.gender[i].value="female")
			{ alert(*****) }			
         }
      }

to just

Code:

for (i=0; i<document.search.gender.length; i++) 
{
     if (document.search.gender[i].checked ) /* checked *IS* true/false...no need to compare to true */
     {
            gender = document.search.gender[i].value;
            alert(gender);
     }
}

**Old Pedant** · Apr 16, 2009, 12:33 AM

But, really, the whole thing could be one heluva lot simpler:

Code:

<html>
<head>
<script>
function changeImage(gender) 
{
     var newBackgroundImage = "url(Images/searchpictures/" + gender + ".jpg)";
     // now do whatever with that newBackgroundImage
     ...
}
</script>
</head>
<body>
...
<form name=search method=post>
  <input type="radio" name="gender" value="male"
            onclick="changeImage(this.value)">Male<br>
  <input type="radio" name="gender" value="female"
            onclick="changeImage(this.value)">Female<br>
</form>
...
</body>
</html>

K.I.S.S.

**doodguy** · Apr 17, 2009, 11:58 AM

thank you all. Only part I'm not grasping is I want more than just a male/female pic. . . I want the user to select a bodystyle like thin/whatever so then it grabs a thin male/thin female pic, then they pick black hair, so basically I have pre defined pics and as users click values it picks a new pic to match criteria and basically build a profile. Just need a point in right direction thanks so much

**Philip M** · Apr 17, 2009, 12:38 PM

This should move you forward:-

Code:

<html>
<head>
<script type = "text/javascript">

var gender = "male";  // defaults
var build = "fat";
var hair = "dark";

function changeImage1(which) {
gender = which;
var newBackgroundImage = "url(Images/searchpictures/" + gender + ".jpg)";
}

function changeImage2(which) {
build = which;
var newBackgroundImage = "url(Images/searchpictures/" + gender + build + ".jpg)";
}

function changeImage3(which) {
hair = which;
var newBackgroundImage = "url(Images/searchpictures/" + gender + build + hair + ".jpg)";
alert (newBackgroundImage);

}

</script>
</head>
<body>

<form name=search method=post>
  <input type="radio" name="gender" value="male" 
            onclick="changeImage1(this.value)">Male<br>
  <input type="radio" name="gender" value="female"
            onclick="changeImage1(this.value)">Female<br>

<br><br>
<input type="radio" name="build" value="obese" 
            onclick="changeImage2(this.value)">Obese<br>
<input type="radio" name="build" value="fat" 
            onclick="changeImage2(this.value)">Fat<br>
  <input type="radio" name="build" value="thin"
            onclick="changeImage2(this.value)">Thin<br>

<br><br>
<input type="radio" name="hair" value="fair" 
            onclick="changeImage3(this.value)">Fair<br>
  <input type="radio" name="hair" value="dark"
            onclick="changeImage3(this.value)">Dark<br>
 <input type="radio" name="hair" value="bald"
            onclick="changeImage3(this.value)">Bald<br>
</form>

</body>
</html>

Do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose.

**Old Pedant** · Apr 17, 2009, 03:00 PM

Philip: Since you *GAVE* default values for all three characteristics, why the need for three separate changeImage functions???

Or, rather, three separate sets of logic.

As it is, your code assigns the new "url" to a *LOCAL* variable and so you'd have to pass that to a common function or duplicate the logic of putting the background image in place in all three functions.

Why not simply:

Code:

<html>
<head>
<script type = "text/javascript">

var gender = "male";  // defaults
var build = "fat";
var hair = "dark";

function changeImage() 
{
    var newBackgroundImage = "url(Images/searchpictures/" + gender + build + hair + ".jpg)";
   ... do something with that image ...
}

function changeGender(which) 
{
    gender = which;
    return changeImage( );
}
function changeBuild(which) 
{
    build = which;
    return changeImage( );
}
function changeHair(which) 
{
    hair = which;
    return changeImage( );
}
</script>

...

Note that this also means he doesn't need "generic" images, such as
male.jpg
malefat.jpg
malethin.jpg
etc.

He can just go to
malefatdark.jpg
malefatlight.jpg
malethindark.jpg
... etc ...

So all the combinations of the three properties, but no extraneous ones.

**doodguy** · Apr 17, 2009, 04:40 PM

pendant wtf am I doing wrong with this? I created 2 images malethin.jpg and femalethin.jpg

Here is my script located in the head of the code:

Code:

<script language="JavaScript" type="text/javascript">

var gender=male;
var bodystyle=thin;

function changeImage( ) {

				
				document.search_character.src="/Images/searchpictures/" + gender + bodystyle + ".jpg";
			}



function changeGender(which) 
{
    gender = which;
    return changeImage( );
}

function changeBodystyle(which)
{
	bodystyle=which;
	return changeImage( );
}



</script>

Here is my form so far:

Code:

<FORM action=searchresults.php  name=search id=search method=post>
		<INPUT type="radio" name="sex" id="sex" value="male" onClick="changeGender(this.value)" checked> Male
		<BR><INPUT type="radio" name="sex" id="sex" value="female" onClick="changeGender(this.value)"> Female<BR>
		<BR>Body Style: <select name="bodystyle" onClick="changeBodystyle(this.value)">
		<option value='%'>Any</option>
		<option>Thin</option>
		<option>Average</option>
		<option>A Few Extra Pounds</option>
		</select> 
		<BR>
		Eye Color: 
<select name="eyecolor" id="eyecolor" onClick="changeImage(this.value)">
<option selected value='%'>Any</option>
<option>Hazel
<option>Blue
<option>Green
<option>Grey
</select> 
		<BR>
		Ethnicity: 
<select name="ethnicity">
<option selected value='%'>Any</option>
<option>Caucasian
<option>African American
<option>Hispanic
<option>Mixed Race
		</TD>
		<TD aligh=left valign=left width=50%>Between the ages of <INPUT type="text" id="agelow" name="agelow" size=3 maxlength=2 value=18> and <INPUT 

type="text" id="agehigh" name="agehigh" size=3 maxlength=5 value=50> 
<BR>Rating of <INPUT type="text" id="rating" name="rating" size=3 maxlength=2 value=1> or higher. 
		</TD>
		<TR>
		<TD align=center colspan=5><INPUT type="submit" value="Search"> <INPUT type="reset"></TD>
		</TR>
		<TR>
		<TD id="picture" colspan=5><img src=/Images/searchpictures/malethin.jpg name=search_character border=0 height=400 width=400>
		</TD>
		</TR>
		</FORM>

**Old Pedant** · Apr 17, 2009, 05:38 PM

Well, you can't use your <select> for body style, as coded.

You don't have any <option>s with value= that match your image names!

You have "malethin.jpg", but the values of your <select> are "%" and "Thin" and then it deterioriates further.

There is no such thing as "wildcards" when it comes to choosing images, so you probably need something like this:

Code:

<select name="bodystyle" onClick="changeBodystyle(this.value)">
	<option value="average">Any</option>
	<option value="thin">Thin</option>
	<option value="average">Average</option>
	<option value="heavy">A Few Extra Pounds</option>
</select>

On a windows server, "malethin.jpg" and "maleThin.jpg" are the same file, but not on Linux or Unix. There, upper and lower case matter in file names.

So far as I can see, the radio buttons for gender should have worked.

If they don't time to debug.

An easy way to do that:

Code:

function changeImage( ) 
{
    var pic = "/Images/searchpictures/" + gender + bodystyle + ".jpg";
    alert("changing to\n" + pic);
    document.search_character.src = pic;
}

Oh, wait! You gave the *name* search_character to that image and then tried to treat it as an ID! Try this:

Code:

    document.images["search_character"].src = pic;

Or give it an id and use document.getElementById to be safe.

**doodguy** · Apr 17, 2009, 06:06 PM

ok here is latest code I'm playing with getting male/female to change but options not working yet

Code:

<script language="JavaScript" type="text/javascript">

var gender='male';
var bodystyle='Thin';
var eyecolor='Hazel';

function changeImage( ) {

				
				document.search_character.src="/Images/searchpictures/" + gender + bodystyle + eyecolor + ".jpg";
			}



function changeGender(which) 
{
    gender = which;
    return changeImage( );
}

function changeBodystyle(which)
{
//	if (which='Any')
//		{	
//			bodystyle='Thin';
//		}
//	else{
	bodystyle=which;
	return changeImage( );
//		}
}

function changeEyecolor(which)
{
//	if (which='Any')
//		{	
//			eyecolor='Hazel';
//		}
//	else{
	eyecolor=which;
	return changeImage( );
//		}
}

</script>

**Old Pedant** · Apr 17, 2009, 06:23 PM

I don't feel you read what I wrote, at all.

WHERE IS YOUR DEBUG CODE???

How do you expect to track down problems if you don't debug?

Example:

Code:

function changeImage( ) {
	var name = "/Images/searchpictures/" + gender + bodystyle + eyecolor + ".jpg";
	alert("before: " + document.search_character.src);
	document.search_character.src = name;
	alert("after: " + document.search_character.src);
}

And if you are *NOT* on a Windows server, then remember that "femaleThinHazel.jpg" is *not* the same file as "femalethinhazel.jpg".

But start with just that tiny bit of debug.

**Old Pedant** · Apr 17, 2009, 06:25 PM

And you have several other JS and HTML errors waiting to be found, by the by. But get past this one first.

**Philip M** · Apr 18, 2009, 02:53 AM

Originally posted by Old Pedant View Post

Note that this also means he doesn't need "generic" images, such as
male.jpg
malefat.jpg
malethin.jpg
etc.

He can just go to
malefatdark.jpg
malefatlight.jpg
malethindark.jpg
... etc ...

So all the combinations of the three properties, but no extraneous ones.

Oh, I imagined that if the user selected "male" the image of a (generic) male was displayed, then successively a fat male, then a fat bald male, then a fat bald blue-eyed male, then a fat bald blue-eyed snub-nosed male, then a fat bald blue-eyed snub-nosed Caucasian male ... and so on being built up according to the selections.

The OP said ".....which basically you click male/female and a male/female pic pops up, then you click bodystyle and a fat/average/thin male/female pops up and so on."

I gave the variables initial default values in case the user selected e.g. "hair" before "gender". In fact this is only a partial solution and it really needs a method of making the user make the selections in order - possibly by revealing the buttons for the "build" options only after a "gender" button has been clicked. As I say, it was not intended as a complete solution - just a pointer to move the OP forward.

Agree that newBackgroundImage should be a global variable.

Announcement

noobie to javascript

noobie to javascript

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment