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 22 2012, 01:37 AM
Post
#2
|
Novice Group: Members Posts: 25 Joined: 12-May 12 Member No.: 17,101 |
I think I may have found a way to disable certain options and leave things the way they are...I hope.
It seems like I can put the disable code in the if then branches, can't I? That way if you choose a glitter lamp, and only silver glitter is available right then, all of the other options could be greyed out. I'll have to wait until I can get the images to swap to experiment with this, but I think the idea is sound. I hope so, because A) I would hate for you to have worked on that for me, only to toss it, and B) I really like the way it works now. |
Lo-Fi Version | Time is now: 26th April 2024 - 03:49 AM |