Mutually Exclusive Options? |
Mutually Exclusive Options? |
Loren |
May 12 2012, 09:16 AM
Post
#1
|
Novice Group: Members Posts: 25 Joined: 12-May 12 Member No.: 17,101 |
Hi! My name is Loren, and this is my first post.
I just started seriously trying to code in HTML/JavaScript, and I've been trying to create an interface where an online user can create their own custom virtual aquarium. This is done with 4 pulldown option menus, where users can choose things like the type of aquarium, the color of the water, the color of the gravel, and the color of the aquarium frame. Eventually, I want to have an image display for each option, and transparent gif files super-imposed for things like the different color aquarium frames so that people can see the aquarium they're making as they design it. I'm attempting to do this via a java script that tracks 4 variables (one for each customizable field), and displays images accordingly. Right now, however, the images are represented by a numeric display of each variable amount...just as a placeholder and indicator. I thought about showing an image directly upon selection of an option, but I need to use these variables other places anyway, so I figured I might as well trigger the image displays with them. There will be a LOT of options...so many that, the number of possible combinations will be 10,000-12,000...so I have to overlap the images. I can't render all of those images separately and reference them. but my problem is, all of the scripts for each option are running automatically, from the first line to the last! If you load my code up and look at it, the 4 variable amounts should all be "000" until you select an option, and then the variable should change accordingly. However, the numbers are as high as they can be, which means the code just ran through each option until it got to the end. Is there a way to put a stop to this behavior? I need for only the option that you select to run its script. Here is my code: 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Build Your Own Aquarium</title> </head><br /> Choose an Aquarium Type<br /> <select> <option value ="-CHOOSE ONE-">-CHOOSE ONE-<script type="text/javascript"> var aquariumtype; aquariumtype="000"; </script></option> <option value ="Freshwater Aquarium">Freshwater Aquarium<script type="text/javascript"> var aquariumtype; aquariumtype="001"; </script></option> <option value ="Saltwater Aquarium">Saltwater Aquarium<script type="text/javascript"> var aquariumtype; aquariumtype="002"; </script></option> </select><br /> <br /> Choose a Gravel Color<br /> <select> <option value ="-CHOOSE ONE-">-CHOOSE ONE-<script type="text/javascript"> var fillcolor; fillcolor="000"; </script></option> <option value ="White">White<script type="text/javascript"> var fillcolor; fillcolor="001"; </script></option> <option value ="Strawberry">Strawberry<script type="text/javascript"> var fillcolor; fillcolor="002"; </script></option> <option value ="Red">Red<script type="text/javascript"> var fillcolor; fillcolor="003"; </script></option> <option value ="Amber">Amber<script type="text/javascript"> var fillcolor; fillcolor="004"; </script></option> <option value ="Orange">Orange<script type="text/javascript"> var fillcolor; fillcolor="005"; </script></option> <option value ="Yellow">Yellow<script type="text/javascript"> var fillcolor; fillcolor="006"; </script></option> <option value ="Lime Green">Lime Green<script type="text/javascript"> var fillcolor; fillcolor="007"; </script></option> <option value ="Green">Green<script type="text/javascript"> var fillcolor; fillcolor="008"; </script></option> <option value ="Mint Green">Mint Green<script type="text/javascript"> var fillcolor; fillcolor="009"; </script></option> <option value ="Fluor. Green">Fluor. Green<script type="text/javascript"> var fillcolor; fillcolor="010"; </script></option> <option value ="Aqua">Aqua<script type="text/javascript"> var fillcolor; fillcolor="011"; </script></option> <option value ="Teal">Teal<script type="text/javascript"> var fillcolor; fillcolor="012"; </script></option> <option value ="Lt. Blue">Lt. Blue<script type="text/javascript"> var fillcolor; fillcolor="013"; </script></option> <option value ="Dk. Blue">Dk. Blue<script type="text/javascript"> var fillcolor; fillcolor="014"; </script></option> <option value ="Fluor. Blue">Fluor. Blue<script type="text/javascript"> var fillcolor; fillcolor="015"; </script></option> <option value ="Purple">Purple<script type="text/javascript"> var fillcolor; fillcolor="016"; </script></option> <option value ="Lavender">Lavender<script type="text/javascript"> var fillcolor; fillcolor="017"; </script></option> <option value ="Violet">Violet<script type="text/javascript"> var fillcolor; fillcolor="018"; </script></option> <option value ="Lt. Pink">Lt. Pink<script type="text/javascript"> var fillcolor; fillcolor="019"; </script></option> <option value ="Dk. Pink">Dk. Pink<script type="text/javascript"> var fillcolor; fillcolor="020"; </script></option> <option value ="Black">Black<script type="text/javascript"> var fillcolor; fillcolor="021"; </script></option> <option value ="Brown">Brown<script type="text/javascript"> var fillcolor; fillcolor="022"; </script></option> </select><br /> <br /> Choose a Water Color<br /> <select> <option value ="-CHOOSE ONE-">-CHOOSE ONE-<script type="text/javascript"> var liquidcolor; liquidcolor="000"; </script></option> <option value ="Clear">Clear<script type="text/javascript"> var liquidcolor; liquidcolor="001"; </script></option> <option value ="Red">Red<script type="text/javascript"> var liquidcolor; liquidcolor="002"; </script></option> <option value ="Amber">Amber<script type="text/javascript"> var liquidcolor; liquidcolor="003"; </script></option> <option value ="Orange">Orange<script type="text/javascript"> var liquidcolor; liquidcolor="004"; </script></option> <option value ="Yellow">Yellow<script type="text/javascript"> var liquidcolor; liquidcolor="005"; </script></option> <option value ="Green">Green<script type="text/javascript"> var liquidcolor; liquidcolor="006"; </script></option> <option value ="Aqua">Aqua<script type="text/javascript"> var liquidcolor; liquidcolor="007"; </script></option> <option value ="Teal">Teal<script type="text/javascript"> var liquidcolor; liquidcolor="008"; </script></option> <option value ="Lt. Blue">Lt. Blue<script type="text/javascript"> var liquidcolor; liquidcolor="009"; </script></option> <option value ="Dk. Blue">Dk. Blue<script type="text/javascript"> var liquidcolor; liquidcolor="010"; </script></option> <option value ="Purple">Purple<script type="text/javascript"> var liquidcolor; liquidcolor="011"; </script></option> <option value ="Lavender">Lavender<script type="text/javascript"> var liquidcolor; liquidcolor="012"; </script></option> <option value ="Violet">Violet<script type="text/javascript"> var liquidcolor; liquidcolor="013"; </script></option> <option value ="Lt. Pink">Lt. Pink<script type="text/javascript"> var liquidcolor; liquidcolor="014"; </script></option> <option value ="Dk. Pink">Dk. Pink<script type="text/javascript"> var liquidcolor; liquidcolor="015"; </script></option> </select><br /> <br /> Choose a Base/Frame Color<br /> <select> <option value ="-CHOOSE ONE-">-CHOOSE ONE-<script type="text/javascript"> var basecolor; basecolor="000"; </script></option> <option value ="Red">Red<script type="text/javascript"> var basecolor; basecolor="001"; </script></option> <option value ="Orange">Orange<script type="text/javascript"> var basecolor; basecolor="002"; </script></option> <option value ="Yellow">Yellow<script type="text/javascript"> var basecolor; basecolor="003"; </script></option> <option value ="Green">Green<script type="text/javascript"> var basecolor; basecolor="004"; </script></option> </select><br /> <br /> <input type="submit" /><br /> <br /> <script type="text/javascript"> document.write(lamptype); document.write("<br />"); </script> <script type="text/javascript"> document.write(fillcolor); document.write("<br />"); </script> <script type="text/javascript"> document.write(liquidcolor); document.write("<br />"); </script> <script type="text/javascript"> document.write(basecolor); document.write("<br />"); </script> <body> <p> </p> </body> </html> Any and all help would be most appreciated! This post has been edited by Loren: May 12 2012, 09:32 AM |
Loren |
May 12 2012, 06:54 PM
Post
#2
|
Novice Group: Members Posts: 25 Joined: 12-May 12 Member No.: 17,101 |
I'm sorry to double-post, but I have a further issue.
I have changed the first selection list to a form, in this format: CODE <form name="aquariumtype"> <p><select name="choice" size="1"> <option>-Select One-</option> <option>Freshwater</option> <option>Saltwater</option> </select></p> </form> Now I have to use this: "document.aquariumtype.choice" to access each possible selection. I'd need to do this with a series of IF/THEN/ELSE branches for each option, am I correct? So for that example, "If document.aquariumtype.choice.value=0", then set var "aquariumtype" to "0""? Could someone please help me with the codes for changing the variable in each instance? |
Christian J |
May 13 2012, 12:42 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
If you're using several SELECT menus you should put them all inside the same form. I also recommend values for each OPTION element, so you can choose something suitable for the script, while still having human-readable content in the OPTION element. And if you want each OPTION value to correspond with a GIF image, you can use the image URL in the OPTION value:
CODE <form name="aquarium"> <select name="watertype" size="1"> <option value="none">-Select One-</option> <option value="freshwater.gif">Freshwater</option> <option value="saltwater.gif">Saltwater</option> </select> <select name="gravelcolor" size="1"> <option value="none">-Select One-</option> <option value="red.gif">Red</option> <option value="blue.gif">Blue</option> </select> </form> I'd need to do this with a series of IF/THEN/ELSE branches for each option, am I correct? So for that example, "If document.aquariumtype.choice.value=0", then set var "aquariumtype" to "0""? No, if I understood this correctly you can retrieve each menu value directly, as long as one is chosen. Something like: CODE var water_type=document.aquarium.watertype.options[document.aquarium.watertype.selectedIndex].value; Combined with the form above (and some more JS), the variable "water_type" now might have the value "freshwater.gif". You can use IF/ELSE to see if the user has chosen another OPTION value than the default "-Select One-", though (or simply remove that OPTION value altogether --after all gravel always has some kind of color). |
Lo-Fi Version | Time is now: 27th April 2024 - 01:20 AM |