Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Drop Down Menus and Javascript Confusion

    I am going crazy trying to figure this out. I have a drop down menu form, right? Right now, what I want, is for it see that I've selected, say, Paper. Then I click a button. After I click the button, I want it to spit out a number in this text area. As a sidenote, I don't NEED the button but I understand running functions off them easier than I do anything else.

    I have nooo idea on how to tell my function that if Paper is selected then the number it should spit out is X. Here's an example of what I'm dealing with.

    Code:
    function dragontypes()  {
    if (document.form3.dragonpicked.value = paper) {
    (document.form1.hpper1.value = 50);
    }
    }
    Then the form

    Code:
    <form name="form3" action="">
    <select name="dragontypesper">
    <option value="paper">Paper</option>
    <option value="green">Green</option>
    <option value="water">Water</option>
    <option value="red">Red</option>
    </select>
    <input name="dragonpicked" value="" />
    </form>
    And the button that makes it go.

    Code:
    <input type = "button" name = "but2" value = "Choose" onclick = "dragontypes()"/>
    The errors I'm getting say "paper is not defined". I'm guessing I don't know what the proper language to use here is. I'm just.. at a loss of how to make this work. I've done some research on drop down menus and javascript but it's just sent me in circles.

  • #2
    New Coder
    Join Date
    Jan 2009
    Posts
    42
    Thanks
    2
    Thanked 6 Times in 6 Posts
    Why don't you just include the value that you want to display in the textbox as the actual value in each of the option elements? Instead of value="paper" just use value="50".
    Code:
    <form name="form3" action="">
    <select name="dragontypesper">
    <option value="50">Paper</option>
    <option value="100">Green</option>
    <option value="150">Water</option>
    <option value="200">Red</option>
    </select>
    <br>
    <input name="dragonpicked" value="" />
    </form>
    
    function dragontypes()  {
       document.form3.dragonpicked.value = document.form3.dragontypesper.value;
    }
    If you absolutely have to use 'paper' as the option value then you'll need to create some type of array or object to keep track of which integer corresponds with each text value (paper, green, etc).
    Code:
    <form name="form3" action="">
    <select name="dragontypesper">
    <option value="paper">Paper</option>
    <option value="green">Green</option>
    <option value="water">Water</option>
    <option value="red">Red</option>
    </select>
    <br>
    <input name="dragonpicked" value="" />
    </form>
    
    var intvalues = {
       paper: 50,
       green: 100,
       water: 150
    };
    
    function dragontypes()  {
       var val = document.form3.dragontypesper.value;
       document.form3.dragonpicked.value = intvalues[val];
    }

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hm the problem is I want to choose "Paper" and have, say, 50 in textbox1, 25 in textbox2, etc.
    Last edited by kenderbard; 01-27-2009 at 01:37 AM.

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question Huh ???

    Quote Originally Posted by kenderbard View Post
    Hm the problem is I want to choose "Paper" and have, say, 50 in textbox1, 25 in textbox2, etc.
    I don't think any of us have the mind reading powers to know where the "textbox1" or "textbox2" elements are coming from.
    Show all the HTML and JS you are trying to use.

  • Users who have thanked jmrker for this post:

    kenderbard (01-27-2009)

  • #5
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry. I'd forgotten I hadn't written it out in the example I gave yet.

    Here is the code.

    Code:
    <script type = "text/javascript">
    var TrueHP = 1;
    var TrueSTR = 1;
    var TrueSKL = 1;
    var TrueSPD = 1;
    var TrueDEF = 1;
    var TrueRES = 1;
    var TrueLUC = 1;
    
    function dragontypes()  {
    if (document.form3.dragonpicked.value = paper) {
    (document.form1.hpper1.value = 50);
    (document.form1.strper.value = 35);
    (document.form1.sklper.value = 55);
    (document.form1.spdper.value = 60);
    (document.form1.defper.value = 20);
    (document.form1.resper.value = 30);
    (document.form1.lucper.value = 50);
    }
    
    }
    
    function stats() {
    var randy=Math.floor(Math.random()*101);
    if (document.form1.hpper1.value > randy) {
    var TrueHP2 = (TrueHP + 1);
    TrueHP = TrueHP2;
    }
    document.form1.hp1.value = (TrueHP);
    
    var randy=Math.floor(Math.random()*101);
    if (document.form1.strper.value > randy) {
    var TrueSTR2 = (TrueSTR + 1);
    TrueSTR = TrueSTR2;
    }
    document.form1.Str1.value = (TrueSTR);
    
    var randy=Math.floor(Math.random()*101);
    if (document.form1.sklper.value > randy) {
    var TrueSKL2 = (TrueSKL + 1);
    TrueSKL = TrueSKL2;
    }
    document.form1.skl1.value = (TrueSKL);
    
    var randy=Math.floor(Math.random()*101);
    if (document.form1.spdper.value > randy) {
    var TrueSPD2 = (TrueSPD + 1);
    TrueSPD = TrueSPD2;
    }
    document.form1.spd1.value = (TrueSPD);
    
    var randy=Math.floor(Math.random()*101);
    if (document.form1.defper.value > randy) {
    var TrueDEF2 = (TrueDEF + 1);
    TrueDEF = TrueDEF2;
    }
    document.form1.def1.value = (TrueDEF);
    
    var randy=Math.floor(Math.random()*101);
    if (document.form1.resper.value > randy) {
    var TrueRES2 = (TrueRES + 1);
    TrueRES = TrueRES2;
    }
    document.form1.res1.value = (TrueRES);
    
    var randy=Math.floor(Math.random()*101);
    if (document.form1.lucper.value > randy) {
    var TrueLUC2 = (TrueLUC + 1);
    TrueLUC = TrueLUC2;
    }
    document.form1.luc1.value = (TrueLUC);
    
    document.form2.gathered.value = ("Level 1\n" + "HP: " + TrueHP + "\n" + "STR: " + TrueSTR + "\n" + "SKL: " + TrueSKL + "\n" + "SPD: " + TrueSPD + "\n" + "DEF: " + TrueDEF + "\n" + "RES: " + TrueRES + "\n" + "LUC: " + TrueLUC);
    }
    
    </script>
    </head>
    
    <body>
    <form name="form3" action="">
    <select name="dragontypesper">>
    <option value="paper">Paper</option>
    <option value="green">Green</option>
    <option value="water">Water</option>
    <option value="red">Red</option>
    </select>
    <input name="dragonpicked" value="" />
    </form>
    
    <form name="form4">
      <input type = "button" name = "but2" value = "Choose" onclick = "dragontypes()"/></form>
    
    <form name="form1">
    HP %: <INPUT TYPE=TEXT NAME="hpper1">
    HP: <input type=TEXT name="hp1" /><br />
    STR %: 
    <input type=text name="strper" />
    STR: 
    <input type=text name="Str1" /><br />
    SKL %: <INPUT TYPE=TEXT NAME="sklper">
    SKL: <input type=TEXT name="skl1" /><br />
    SPD %: <INPUT TYPE=TEXT NAME="spdper">
    SPD: <input type=TEXT name="spd1" /><br />
    DEF %: <INPUT TYPE=TEXT NAME="defper">
    DEF: <input type=TEXT name="def1" /><br />
    RES %: <INPUT TYPE=TEXT NAME="resper">
    RES: <input type=TEXT name="res1" /><br />
    LUC %: <INPUT TYPE=TEXT NAME="lucper">
    LUC: <input type=TEXT name="luc1" /><br />
    
    </form>
    <form name="form2">
      <input type = "button" name = "but1" value = "Stat Me" onclick = "stats()"/><br />
    <br />
    <textarea name="gathered"></textarea>
      </form>

  • #6
    New Coder
    Join Date
    Jan 2009
    Posts
    42
    Thanks
    2
    Thanked 6 Times in 6 Posts
    You need to change this line:
    Code:
    if (document.form3.dragonpicked.value = paper) {
    to the following:
    Code:
    if (document.form3.dragonpicked.value == 'paper') {

  • #7
    New Coder
    Join Date
    Jan 2009
    Posts
    42
    Thanks
    2
    Thanked 6 Times in 6 Posts
    Code:
    <html>
    <head>
    <script type = "text/javascript">
    var TrueHP = 1;
    var TrueSTR = 1;
    var TrueSKL = 1;
    var TrueSPD = 1;
    var TrueDEF = 1;
    var TrueRES = 1;
    var TrueLUC = 1;
    
    function dragontypes()  {
    	if (document.form1.dragonpicked.value == 'paper') {
    		document.form1.hpper1.value = 50;
    		document.form1.strper.value = 35;
    		document.form1.sklper.value = 55;
    		document.form1.spdper.value = 60;
    		document.form1.defper.value = 20;
    		document.form1.resper.value = 30;
    		document.form1.lucper.value = 50;
    	}
    
    }
    
    function stats() {
    var randy=Math.floor(Math.random()*101);
    if (document.form1.hpper1.value > randy) {
    var TrueHP2 = (TrueHP + 1);
    TrueHP = TrueHP2;
    }
    document.form1.hp1.value = (TrueHP);
    
    var randy=Math.floor(Math.random()*101);
    if (document.form1.strper.value > randy) {
    var TrueSTR2 = (TrueSTR + 1);
    TrueSTR = TrueSTR2;
    }
    document.form1.Str1.value = (TrueSTR);
    
    var randy=Math.floor(Math.random()*101);
    if (document.form1.sklper.value > randy) {
    var TrueSKL2 = (TrueSKL + 1);
    TrueSKL = TrueSKL2;
    }
    document.form1.skl1.value = (TrueSKL);
    
    var randy=Math.floor(Math.random()*101);
    if (document.form1.spdper.value > randy) {
    var TrueSPD2 = (TrueSPD + 1);
    TrueSPD = TrueSPD2;
    }
    document.form1.spd1.value = (TrueSPD);
    
    var randy=Math.floor(Math.random()*101);
    if (document.form1.defper.value > randy) {
    var TrueDEF2 = (TrueDEF + 1);
    TrueDEF = TrueDEF2;
    }
    document.form1.def1.value = (TrueDEF);
    
    var randy=Math.floor(Math.random()*101);
    if (document.form1.resper.value > randy) {
    var TrueRES2 = (TrueRES + 1);
    TrueRES = TrueRES2;
    }
    document.form1.res1.value = (TrueRES);
    
    var randy=Math.floor(Math.random()*101);
    if (document.form1.lucper.value > randy) {
    var TrueLUC2 = (TrueLUC + 1);
    TrueLUC = TrueLUC2;
    }
    document.form1.luc1.value = (TrueLUC);
    
    document.form1.gathered.value = ("Level 1\n" + "HP: " + TrueHP + "\n" + "STR: " + TrueSTR + "\n" + "SKL: " + TrueSKL + "\n" + "SPD: " + TrueSPD + "\n" + "DEF: " + TrueDEF + "\n" + "RES: " + TrueRES + "\n" + "LUC: " + TrueLUC);
    }
    
    </script>
    </head>
    
    <body>
    <form name="form1" action="">
    <select name="dragontypesper" onchange="document.form1.dragonpicked.value = this.value;">
    <option value="paper">Paper</option>
    <option value="green">Green</option>
    <option value="water">Water</option>
    <option value="red">Red</option>
    </select>
    <input name="dragonpicked" value="" />
    <br><br>
    <input type = "button" name = "but2" value = "Choose" onclick = "dragontypes()"/>
    <br><br>
    HP %: <INPUT TYPE=TEXT NAME="hpper1">
    HP: <input type=TEXT name="hp1" /><br />
    STR %: 
    <input type=text name="strper" />
    STR: 
    <input type=text name="Str1" /><br />
    SKL %: <INPUT TYPE=TEXT NAME="sklper">
    SKL: <input type=TEXT name="skl1" /><br />
    SPD %: <INPUT TYPE=TEXT NAME="spdper">
    SPD: <input type=TEXT name="spd1" /><br />
    DEF %: <INPUT TYPE=TEXT NAME="defper">
    DEF: <input type=TEXT name="def1" /><br />
    RES %: <INPUT TYPE=TEXT NAME="resper">
    RES: <input type=TEXT name="res1" /><br />
    LUC %: <INPUT TYPE=TEXT NAME="lucper">
    LUC: <input type=TEXT name="luc1" /><br />
    <br><br>
    <input type = "button" name = "but1" value = "Stat Me" onclick = "stats()"/>
    <br /><br />
    <textarea name="gathered"></textarea>
    </form>
    </body>
    </html>

  • #8
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Oh, wow thank you so much!

    And for the other values, like red, green, etc, I just make a new 'if' in the function right?
    Last edited by kenderbard; 01-27-2009 at 10:38 PM.

  • #9
    New Coder
    Join Date
    Jan 2009
    Posts
    42
    Thanks
    2
    Thanked 6 Times in 6 Posts
    I'd recommend using a switch statement instead.
    Code:
    function dragontypes()  {
       var dpick = document.form1.dragonpicked.value;
       switch (dpick) {
          case 'paper':
             document.form1.hpper1.value = 50;
             document.form1.strper.value = 35;
             document.form1.sklper.value = 55;
             document.form1.spdper.value = 60;
             document.form1.defper.value = 20;
             document.form1.resper.value = 30;
             document.form1.lucper.value = 50;
             break;
    
          case 'green':
             document.form1.hpper1.value = 50;
             document.form1.strper.value = 35;
             document.form1.sklper.value = 55;
             document.form1.spdper.value = 60;
             document.form1.defper.value = 20;
             document.form1.resper.value = 30;
             document.form1.lucper.value = 50;
             break;
    
          case 'red':
             document.form1.hpper1.value = 50;
             document.form1.strper.value = 35;
             document.form1.sklper.value = 55;
             document.form1.spdper.value = 60;
             document.form1.defper.value = 20;
             document.form1.resper.value = 30;
             document.form1.lucper.value = 50;
             break;
    
          default:
             document.form1.hpper1.value = 50;
             document.form1.strper.value = 35;
             document.form1.sklper.value = 55;
             document.form1.spdper.value = 60;
             document.form1.defper.value = 20;
             document.form1.resper.value = 30;
             document.form1.lucper.value = 50;
             break;
       }
    }
    For more info about the switch statement visit the link below.

    http://www.w3schools.com/jS/js_switch.asp


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •