 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 |
  |
 
|
Posts in this topic
Loren Mutually Exclusive Options? May 12 2012, 09:16 AM
Christian J You can't put SCRIPT elements inside OPTION el... May 12 2012, 09:48 AM Loren Thanks for that!
Sorry I'm so noobish. :... May 12 2012, 09:56 AM Loren I'm sorry to double-post, but I have a further... May 12 2012, 06:54 PM
Christian J If you're using several SELECT menus you shoul... May 13 2012, 12:42 PM Loren
If you're using several SELECT menus you shou... May 14 2012, 10:19 AM Loren I'm sorry to double-post, but I didn't qui... May 14 2012, 12:32 PM Christian J
overlaying a transparency that is already a trans... May 14 2012, 01:52 PM Loren Oh! Well then it looks like CSS is the answer ... May 14 2012, 02:38 PM Christian J
Oh! Well then it looks like CSS is the answer... May 14 2012, 04:09 PM Loren
In any case you need CSS to position all the imag... May 14 2012, 08:15 PM Christian J
What I mean by auto text, is having the text (or ... May 15 2012, 08:24 AM Loren Well I've had another minor breakthrough. I... May 15 2012, 01:45 AM Christian J
Now I just need to figure out how to render the i... May 15 2012, 09:10 AM Loren Well, I've had two similar projects swimming t... May 15 2012, 10:14 PM Christian J
Well, I've had two similar projects swimming ... May 16 2012, 12:19 PM Loren I've been having horrible luck with comprehend... May 16 2012, 12:56 AM Christian J
I've been having horrible luck with comprehen... May 16 2012, 12:35 PM Christian J (...continued from last posts:)
You should use a... May 16 2012, 12:20 PM Loren
Note the difference between an [b]img element sel... May 16 2012, 05:56 PM Christian J
Aha! So, when you make a selection, the OPTIO... May 17 2012, 02:16 PM Loren Please disregard that code at the end of my last p... May 16 2012, 07:31 PM Christian J
Ok, I think that answered one of my questions...... May 17 2012, 02:18 PM Loren I'm sorry for all of these posts where I'm... May 16 2012, 11:08 PM Christian J
I'm sorry for all of these posts where I... May 17 2012, 02:22 PM Loren Ok, first of all, I merged those 2 style elements,... May 17 2012, 08:48 PM Christian J
when I try to turn this:
[code]<script type=... May 18 2012, 11:17 AM Loren And one more dumb question...can I still use the ... May 18 2012, 12:01 AM Christian J
If so, how do I reconcile this code:
*snip*
...... May 18 2012, 11:19 AM Loren One MORE dumb question:
Is it possible to assign ... May 18 2012, 01:08 AM Christian J
Is it possible to assign a selection value AND an... May 18 2012, 11:32 AM Loren Amazing!!
Man, I'm going to start all... May 18 2012, 02:14 PM Christian J
If I take out the "onchange swapImage" ... May 19 2012, 10:35 AM Loren And now the mandatory dumb question.
In your exam... May 18 2012, 10:06 PM Loren
Ok, I AM already adding in the image elements...o... May 19 2012, 08:21 AM Loren Ok, here is the "alert" script that work... May 19 2012, 09:26 AM Christian J
In your example, what does "('lamptype_p... May 19 2012, 11:01 AM Loren Now we're cooking with gas:
<!DOCTYPE... May 19 2012, 12:16 PM Loren Ok, it's NOT that.
Sorry, I dinged out there ... May 19 2012, 01:47 PM Loren I think I may have found a way to disable certain ... May 22 2012, 01:37 AM Loren Sorry I drove you away, Christian. :(
And I'm... Jun 8 2012, 09:58 AM Christian J
about 80% of the links you gave me were broken
W... Jun 9 2012, 12:38 PM Loren Which links are broken?
Going back and reading the... Jun 11 2012, 07:24 PM  |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 18th April 2024 - 06:37 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC