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 19 2012, 01:47 PM
Post
#2
|
Novice Group: Members Posts: 25 Joined: 12-May 12 Member No.: 17,101 |
Ok, it's NOT that.
Sorry, I dinged out there (imagine). And those image id's are like a different kind of variable, maybe...? I've seen some other instances of that in my readings. Oh, and this is something for another point, but I think I've decided that I want to designate which set of fill I want to display, based on which lamp type is selected. And by that I mean: CODE //Rewrites the text and values options[0]=new Option("Select a page","none"); options[1]=new Option("Red"); options[2]=new Option("Orange"); options[3]=new Option("Yellow"); options[0].selected=true It will give a totally different set of options for a glitter lamp than for a lava lamp. Again, I want to try and work that in later, rather than now, when I can't even seem to get the images to swap. I still haven't decided if I should try and use that, though. One advantage of doing it the way it is now, is that people can switch back and forth between white wax and white glitter (or whichever color) to compare them, and I don't think that would work the other way. Switching from "Lava Lamp" to "Glitter Lamp" would reset the whole thing. The dis-advantage to doing it the way it is now is...now that I'm trying to reproduce these lamps irl, I have to make sure that I can add a "disable" to options when they become unavailable due to restocking issues. I won't be able to do that the way it is now. I would be disabling the color "White" for both kinds of lamps, even when the white wax for the lava lamps was still available. This post has been edited by Loren: May 19 2012, 02:42 PM |
Lo-Fi Version | Time is now: 26th April 2024 - 08:47 AM |