Web Analytics Made Easy -
StatCounter conditional statements quit executing - CodingForum

Announcement

Collapse
No announcement yet.

conditional statements quit executing

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

  • conditional statements quit executing

    I am using a simple javascript with conditional statements to update a picture based on the users' selections from the two drop down menus.

    Most of the image urls are similar, so all I really needed to do was insert the variables based on the selection into the link. Some, however, needed a totally different url to be placed for the image, which is why I used the else if statements.

    Everything was working perfectly until I had to add more conditionals for the different options available in the selections to complete the function, which now only executes the if and else if statements, rarely the else statement.

    To see the script in action visit my url=http://nmez.byethost11.com/index.php?option=com_content&task=view&id=13&Itemid=2]Pet & Petpet Poser[/url].

    I have used this script on several other demo sites. On my first site, it worked great. Since then, several new petpets became available, new colors that didn't fall into the general rule for the image url, and new petpet types were also created.

    The more conditional statements I add, the less likely the script is to execute the else statement. Example: There are now 22 different colors for an Angelpuss. The "original" color is the only one that should be included in an if statement, as the others fall within the range of my else statement. Yet, those colors will not display as if they don't exist, if I do not add else if statements for ever single one of them.

    Here's part of my code from my included .js file:

    Code:
    <!-- Start NMEZ Petpet Poser
      function update_petpet_picture() {
      petpet_type  = document.option_petpetform.pet.value;
      petpet_color = document.option_petpetform.color.value;
    
    if (petpet_color == "original" & petpet_type == "angelpuss")
      {picture = "http://images.neopets.com/items/angelpuss.gif";}
    
    else if (petpet_color == "original" & petpet_type == "babaa")
      {picture = "http://images.neopets.com/items/pets_babaa.gif";}
    
    else if (petpet_color == "plushie" & petpet_type == "babaa")
     {picture = "http://images.neopets.com/items/babaa_plushie_petpet.gif";}
    
    else if (petpet_color == "original" & petpet_type == "babyca")
      {picture = "http://images.neopets.com/items/petpet_babyca.gif";}
    
    else {picture = "http://images.neopets.com/items/" + petpet_type 
    + "_" + petpet_color + ".gif";}
      document.petpet_image.src = picture;
      return true;}
    //--> End NMEZ Petpet Poser
    Then my form is like this:

    Code:
    <form name='option_petpetform' method='post' onChange='update_petpet_picture()'>
    
    <select name='color' onChange='update_petpet_picture()'>
    <option value='original' selected>Unpainted</option>
    <option value='black'>Black</option>
    <option value='blue'>Blue</option>
    <option value='brown'>Brown</option>
    <option value='christmas'>Christmas</option>
    </select>
    
    <select name='pet' onChange='update_petpet_picture()'>
    <OPTION value='angelpuss'>Angelpuss</OPTION> 
    <OPTION value='babaa'>Babaa</OPTION>
    <option value='babyca'>Babyca</option>
    </select>
    </form>
    
    <!---
    IMAGE.
    --->
    
    <br />
    <img name='petpet_image' 
    width=80 height=80 src="http://images.neopets.com/items/angelpuss.gif">
    Like I said before, the more conditionals that I add, the less likely the script will execute the else statement (which is what almost ever other color selection falls into). As a quick remedy, I was adding even more else if statements for all of the images that should have been displayed using the else statement but weren't. However, this rather defeats the purpose of the script.

    On my site, if I add the code in its entirety to my page, it won't execute at all. So I had to remove the script code from the content and included it into my content item as a separate .js file... which is a pain in the behind as then I have to edit 2 separate files any time a new petpet type or color is added- one in my administration backend, one via ftp- rather than editing one page via my administration backend.

    I tried separating the scripts into different .js files.... one for the neopian petpets, one for medieval petpets, etc.... and including each file into my content item. That didn't work (though I may have done it wrong). I've also tried writing it where the script for a particular form is directly above that form in my content. That didn't work either, though once again I could be doing it wrong.

    I am now trying to work it out using another method.

    Now I have done this:
    Code:
    <script language="JavaScript" type="text/javascript">
    
    <!-- Start Pet Poser
    function updatepet() {  
    species = document.petform.species.value;
    color = document.petform.color.value;  
    document.petimage.src = "http://images.neopets.com/pets/happy/" + species + "_" + color + "_baby.gif";
    return true;
    }
    //--> End Pet Poser
    
    <!-- Start Petpet Poser
    function update_petpet_picture() {
    petpet_type = document.option_petpetform.pet.value;
    petpet_color = document.option_petpetform.color.value;
    document.petpet_image.src = "http://images.neopets.com/items/" + petpet_type + "_" + petpet_color + ".gif";
    return true;
    }
    //-- End Petpet Poser
    
    </script>
    
    <form name='petform' method='post' onChange='updatepet()'>
    <select name='color' onChange='updatepet()'>
    
    <option value='alien'>Alien</option>
    <option value='apple'>Apple</option>
    <option value='asparagus'>Asparagus</option>
    <option value='aubergine'>Aubergine</option>
    <option value='avocado'>Avocado</option>
    <option value='baby'>Baby</option>
    <option value='blue'>Blue</option>
    <option value='blueberry'>Blueberry</option>
    <option value='brown'>Brown</option>
    </select>
    
    <select name='species' onChange='updatepet()'>
    
    <option value='acara'>Acara</option>
    <option value='aisha' selected>Aisha</option>
    <option value='blumaroo'>Blumaroo</option>
    <option value='bori'>Bori</option>
    <option value='bruce'>Bruce</option>
    <option value='buzz'>Buzz</option>
    </select>
    
    </form>
    
    <br />
    
    <!---
    IMAGE.
    --->
    
    <img name='petimage' width=150 height=150 src="http://images.neopets.com/pets/happy/aisha_alien_baby.gif">
    
    <b>Neopian Petpets</b>
    
    <form name='option_petpetform' method='post' onChange='update_petpet_picture()'>
    
    <select name='color' onChange='update_petpet_picture()'>
    <option value='original' selected>Unpainted</option>
    <option value='black'>Black</option>
    <option value='blue'>Blue</option>
    <option value='brown'>Brown</option>
    <option value='christmas'>Christmas</option>
    <option value='chocolate'>Chocolate</option>
    </select>
    
    <select name='pet' onChange='update_petpet_picture()'>
    
    <OPTION value='angelpuss'>Angelpuss</OPTION> 
    <OPTION value='babaa'>Babaa</OPTION>
    <OPTION value='babith'>Babith</OPTION>
    <option value='babyca'>Babyca</option>
    <option value='baby_fungus'>Baby Space Fungus</option>
    <OPTION value='bartamus'>Bartamus</OPTION>
    </select>
    </form>
    
    <!---
    IMAGE.
    --->
    
    <br />
    <img name='petpet_image' width=80 height=80 src="http://images.neopets.com/items/angelpuss.gif">
    This is also currently working, and I have all of the options listed. However, how would I add the conditionals for the petpet poser since

    document.petpet_image.src = "http://images.neopets.com/items/" + petpet_type + "_" + petpet_color + ".gif";

    is not always true for the petpets? I am unsure if using if statements would apply or if it would once again do the same thing that it is currently doing, and stop executing the script when there are too many. I am also unsure if I do follow the if statements, how I would set my else statement.

    Or should I try the switch task to switch the variable of document.petpet_image.src when certain petpet types and colors are selected? If so, how on earth would I go about doing that?

    Also, on another forums, a person suggested changing the names of the images to match the naming convention. These images are Neopets images on Neopets' image server. The only way I could do that would be if I saved each and every image to my own host (which would take considerable space). This also defeats the purpose as this script will show a new image on neopets image server as soon as it is there as long as it follows the naming convention.

  • #2
    Biggest problem I see is you are trying to load images that don't exist
    I have made some changes and added some code so you can see what is attempting to load.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>Untitled</title>
    	<meta name="generator" content="BBEdit" />
    <script language="JavaScript">
       function update_petpet_picture() {
      petpet_type  = document.option_petpetform.pet.value;
      petpet_color = document.option_petpetform.color.value;
    // alert("petpet_type:"+petpet_type+" petpet_color:"+petpet_color)
    
    
    if (petpet_color == "original" & petpet_type == "angelpuss"){
      picture = "http://images.neopets.com/items/angelpuss.gif";
      }
    
    else if (petpet_color == "original" & petpet_type == "babaa"){
    picture = "http://images.neopets.com/items/pets_babaa.gif";
    }
    
    else if (petpet_color == "plushie" & petpet_type == "babaa"){
     picture = "http://images.neopets.com/items/babaa_plushie_petpet.gif";
     }
    
    else if (petpet_color == "original" & petpet_type == "babyca") {
      picture = "http://images.neopets.com/items/petpet_babyca.gif";}
    
    else {
    picture = "http://images.neopets.com/items/" + petpet_type + "_" + petpet_color + ".gif";
    }
    
    document.petpet_image.src = picture;
      
     
    document.getElementById('imgtest').innerHTML = '<a href="'+picture+'"><img src="'+picture+'"><br>'+picture;
    }
    </script>
    
    
    </head>
    <body>
    <form name='option_petpetform' method='post'>
    
    <select name='color' onChange='update_petpet_picture()'>
    <option value='original' selected>Unpainted</option>
    <option value='black'>Black</option>
    <option value='blue'>Blue</option>
    <option value='brown'>Brown</option>
    <option value='christmas'>Christmas</option>
    </select>
    
    <select name='pet' onChange='update_petpet_picture()'>
    <OPTION value='angelpuss'>Angelpuss</OPTION> 
    <OPTION value='babaa'>Babaa</OPTION>
    <option value='babyca'>Babyca</option>
    </select>
    
    <!---
    IMAGE.
    --->
    
    <br />
    <img name='petpet_image' width=80 height=80 src="http://images.neopets.com/items/angelpuss.gif">
    <br><hr>
    <div id="imgtest">
    <a href="http://images.neopets.com/items/angelpuss.gif">
    <img src="http://images.neopets.com/items/angelpuss.gif"><br>
    http://images.neopets.com/items/angelpuss.gif
    </div>
    
    </form>
    
    </body>
    </html>

    Comment


    • #3
      Originally posted by cyber11 View Post
      Biggest problem I see is you are trying to load images that don't exist
      I have made some changes and added some code so you can see what is attempting to load.
      thanks, i'm gonna see if that will work for me....

      Comment


      • #4
        I would have group the exceptions (combinations which have no pictures) in a separate array:

        var except=[
        angelpuss_black,
        babaa_brown
        ]

        than circle through the array before changing the src. if the combination of the select values is not found in that array, change the src, else do nothing (return)
        KOR
        Offshore programming
        -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

        Comment

        Working...
        X