...

View Full Version : Drop Down Menus and Javascript Confusion



kenderbard
01-27-2009, 12:06 AM
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.


function dragontypes() {
if (document.form3.dragonpicked.value = paper) {
(document.form1.hpper1.value = 50);
}
}

Then the form


<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.


<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.

jcrypt
01-27-2009, 12:46 AM
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".


<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).


<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];
}

kenderbard
01-27-2009, 02:29 AM
Hm the problem is I want to choose "Paper" and have, say, 50 in textbox1, 25 in textbox2, etc.

jmrker
01-27-2009, 05:04 AM
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. :confused:
Show all the HTML and JS you are trying to use.

kenderbard
01-27-2009, 04:59 PM
Sorry. I'd forgotten I hadn't written it out in the example I gave yet.

Here is the 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>

jcrypt
01-27-2009, 05:20 PM
You need to change this line:


if (document.form3.dragonpicked.value = paper) {

to the following:


if (document.form3.dragonpicked.value == 'paper') {

jcrypt
01-27-2009, 05:38 PM
<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>

kenderbard
01-27-2009, 11:25 PM
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?

jcrypt
01-28-2009, 02:06 AM
I'd recommend using a switch statement instead.


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum