Web Analytics Made Easy -
StatCounter noobie to javascript - CodingForum

Announcement

Collapse
No announcement yet.

noobie to javascript

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • noobie to javascript

    hey all this should be simple. . . I'm making a dynamic search test page, 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. Here is code I have so far to ge tme started but its majorly wrong. Can someone point me in right direction PLEASE

    Code:
    <html>
      <head>
          <script>
          
          function changeImage() {
    
            maleimage = "url(Images/searchpictures/male.jpg)";
    	femaleimage = "url(Images/searchpictures/female.jpg)";
    
    
    
    
    
    	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(*****) }			
             }
          }
    
    
    //if (document.write.gender='male')
    //	{
    //        document.getElementById('picture').style.backgroundImage = maleimage;
    //	alert(male)
    //	}
    //	elseif (gender.value='female')
    //	{
    //	document.getElementById('picture').style.backgroundImage = femaleimage;
    //	alert(female)
    //	}
    
    
    	
    //	alert(document.getElementById('female').value);
    
    	
          }
    
        </script>
      </head>
      <body>
        <table width=100% height=100% border=10>
          <tr>
            <td width=50% height=50% id="picture"></td>
          </tr>
          <tr>
            <td>
    <form name=search method=post>
    	<input type="radio" name="gender" id="male" value="male" onClick="changeImage()">Male<br>
    <input type="radio" name="gender" id="female" value="female" onClick="changeImage()">Female<br>
    </form>
    	<td>
        </table>
      </body>
    </html>

  • #2
    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".
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

    Comment


    • #3
      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);
           }
      }
      Be yourself. No one else is as qualified.

      Comment


      • #4
        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.
        Be yourself. No one else is as qualified.

        Comment


        • #5
          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

          Comment


          • #6
            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.
            Last edited by Philip M; Apr 17, 2009, 12:47 PM.

            All the code given in this post has been tested and is intended to address the question asked.
            Unless stated otherwise it is not just a demonstration.

            Comment


            • #7
              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.
              Be yourself. No one else is as qualified.

              Comment


              • #8
                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>

                Comment


                • #9
                  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.
                  Be yourself. No one else is as qualified.

                  Comment


                  • #10
                    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>

                    Comment


                    • #11
                      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.
                      Be yourself. No one else is as qualified.

                      Comment


                      • #12
                        And you have several other JS and HTML errors waiting to be found, by the by. But get past this one first.
                        Be yourself. No one else is as qualified.

                        Comment


                        • #13
                          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.
                          Last edited by Philip M; Apr 18, 2009, 03:10 AM.

                          All the code given in this post has been tested and is intended to address the question asked.
                          Unless stated otherwise it is not just a demonstration.

                          Comment

                          Working...
                          X