Using options from select tag as inputs for Javascript
Question
So far I have written the following 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>Untitled Document</title>
</head>
<body background="Pics\Pattern.png">
<body>
<table style="width:10%">
<tr>
<th > <font family = "Verdana" color = #fff>Current Stat</font></th>
<th > <font family = "Verdana" color = #fff>Current Level</font></th>
<th > <font family = "Verdana" color = #fff> Base Stat</font></th>
<th > <font family = "Verdana" color = #fff> EV's In Stat</font></th>
<th > <font family = "Verdana" color = #fff> What Stat</font></th>
<th ><font family = "Verdana" color = #fff> Nature Is:</font></th>
</tr>
<tr>
<td class="mycell">
<input type = "text" style="width:133px" id = "C-Stat" />
</td>
<td class="mycell">
<input type = "text" style="width:133px" id = "C-Level" />
</td>
<td class="mycell">
<input type = "text" style="width:133px" id = "B-Stat" />
</td>
<td class="mycell">
<input type = "text" style="width:133px" id = "EV-Stat" />
</td>
<td class="mycell">
<style="width:133px" />
<select id = "What-Stat">
<option value="HP">HP</option>
<option value="Attack">Attack</option>
<option value="Defence">Defence</option>
<option value="Special Attack">Special Attack</option>
<option value="Special Defence">Special Defence</option>
<option value="Speed">Speed</option>
</select>
</td>
<td class="mycell">
<style="width:133px"/>
<select id = "Nature">
<option value="Beneficial">Beneficial</option>
<option value="Neutral">Neutral</option>
<option value="Detrimental">Detrimental</option>
</select>
</td>
</table>
<button onclick="IVFunction()">Get IV</button>
<p id="checkar"></p>
</body>
<script>
function IVFunction() {
var CS = parseInt(document.getElementById("C-Stat").value);
var CL = parseInt(document.getElementById("C-Level").value);
var BS = parseInt(document.getElementById("B-Stat").value);
var ES = parseInt(document.getElementById("EV-Stat").value);
var N = parseInt(document.getElementById("Nature").value);
var WS = parseInt(document.getElementById("What-Stat").value);
var done = "Please Enter A Valid Input";
if (N=="Beneficial") {
var N = 1.1;
}
else if (N=="Neutral") {
var N = 1.0;
}
else if (N=="Detrimental") {
var N = 0.9;
}
if (WS == "HP") {
var HPIV1 = ((CS-10)*100)/CL;
var HPIV2 = HPIV1 - (2*BS) - (ES/4) - 100;
var done = HPIV2;
}
else if (WS != "HP") {
var IV1 = ((CS/N - 5)*100)/CL;
var IV2 = IV1 - (2*BS) - (ES/4);
var done = IV2;
}
document.getElementById("checkar").innerHTML = done;
}
</script>
</html>
The code shows the user a table, and then takes both text and select box inputs to run a scripted code. What I want to fix in the code, is to do with the select options. In the script section I have outlined some conditions that will occur depending on what options the user selects as their input, however I am unsure how to actually use these values as inputs for the script code; specifically the section about setting N's value.
Any help would be much appreciated :)
2 answers
solution1
1 2015-08-03 13:44:44
Your problem is these two lines:
var N = parseInt(document.getElementById("Nature").value);
var WS = parseInt(document.getElementById("What-Stat").value);
where you are trying to parse words into an integer.
Remove the parseInt() and you should be good to go:
function IVFunction() { var CS = parseInt(document.getElementById("C-Stat").value); var CL = parseInt(document.getElementById("C-Level").value); var BS = parseInt(document.getElementById("B-Stat").value); var ES = parseInt(document.getElementById("EV-Stat").value); var N = document.getElementById("Nature").value; var WS = document.getElementById("What-Stat").value; var done = "Please Enter A Valid Input"; if (N == "Beneficial") { var N = 1.1; } else if (N == "Neutral") { var N = 1.0; } else if (N == "Detrimental") { var N = 0.9; } if (WS == "HP") { var HPIV1 = ((CS - 10) * 100) / CL; var HPIV2 = HPIV1 - (2 * BS) - (ES / 4) - 100; var done = HPIV2; } else if (WS != "HP") { var IV1 = ((CS / N - 5) * 100) / CL; var IV2 = IV1 - (2 * BS) - (ES / 4); var done = IV2; } document.getElementById("checkar").innerHTML = done; }
<!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>Untitled Document</title> </head> <body background="Pics\\Pattern.png"> <body> <table style="width:10%"> <tr> <th> <font family="Verdana" color=# fff>Current Stat</font> </th> <th> <font family="Verdana" color=# fff>Current Level</font> </th> <th> <font family="Verdana" color=# fff> Base Stat</font> </th> <th> <font family="Verdana" color=# fff> EV's In Stat</font> </th> <th> <font family="Verdana" color=# fff> What Stat</font> </th> <th><font family="Verdana" color=# fff> Nature Is:</font> </th> </tr> <tr> <td class="mycell"> <input type="text" style="width:133px" id="C-Stat" /> </td> <td class="mycell"> <input type="text" style="width:133px" id="C-Level" /> </td> <td class="mycell"> <input type="text" style="width:133px" id="B-Stat" /> </td> <td class="mycell"> <input type="text" style="width:133px" id="EV-Stat" /> </td> <td class="mycell"> <style="width:133px" /> <select id="What-Stat"> <option value="HP">HP</option> <option value="Attack">Attack</option> <option value="Defence">Defence</option> <option value="Special Attack">Special Attack</option> <option value="Special Defence">Special Defence</option> <option value="Speed">Speed</option> </select> </td> <td class="mycell"> <style="width:133px" /> <select id="Nature"> <option value="Beneficial">Beneficial</option> <option value="Neutral">Neutral</option> <option value="Detrimental">Detrimental</option> </select> </td> </table> <button onclick="IVFunction()">Get IV</button> <p id="checkar"></p> </body> </html>
solution2
1 ACCPTED 2015-08-03 13:56:07
You should not use parseInt() for N and WS , and there are many redefinition of variables in your code. What's more, put all your styles in css files.
function IVFunction() { var CS = parseInt(document.getElementById("C-Stat").value); var CL = parseInt(document.getElementById("C-Level").value); var BS = parseInt(document.getElementById("B-Stat").value); var ES = parseInt(document.getElementById("EV-Stat").value); var N = document.getElementById("Nature").value; var WS = document.getElementById("What-Stat").value; var done = "Please Enter A Valid Input"; if (N == "Beneficial") { N = 1.1; } else if (N == "Neutral") { N = 1.0; } else if (N == "Detrimental") { N = 0.9; } if (WS == "HP") { var HPIV1 = ((CS - 10) * 100) / CL; var HPIV2 = HPIV1 - (2 * BS) - (ES / 4) - 100; done = HPIV2; } else if (WS != "HP") { var IV1 = ((CS / N - 5) * 100) / CL; var IV2 = IV1 - (2 * BS) - (ES / 4); done = IV2; } document.getElementById("checkar").innerHTML = done; }
body { font-family: "Verdana", serif; background: url("..\\Pics\\Pattern.png"); } th { color: black; } td { width: 133px }
<!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>Untitled Document</title> </head> <body> <table> <tr> <th>Current Stat</th> <th>Current Level</th> <th>Base Stat</th> <th>EV's In Stat</th> <th>What Stat</th> <th>Nature Is</th> </tr> <tr> <td class="mycell"> <input type="text" id="C-Stat" /> </td> <td class="mycell"> <input type="text" id="C-Level" /> </td> <td class="mycell"> <input type="text" id="B-Stat" /> </td> <td class="mycell"> <input type="text" id="EV-Stat" /> </td> <td class="mycell"> <select id="What-Stat"> <option value="HP">HP</option> <option value="Attack">Attack</option> <option value="Defence">Defence</option> <option value="Special Attack">Special Attack</option> <option value="Special Defence">Special Defence</option> <option value="Speed">Speed</option> </select> </td> <td class="mycell"> <select id="Nature"> <option value="Beneficial">Beneficial</option> <option value="Neutral">Neutral</option> <option value="Detrimental">Detrimental</option> </select> </td> </table> <button onclick="IVFunction()">Get IV</button> <p id="checkar"></p> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Group options in select tag using JavaScript
Is there a way to validate 2 select tag in html with the same options? using javascript
Adding list of options to HTML5 select tag using JavaScript
Removing options from Select tag in Vanilla JavaScript with "for .. of" loop
How to build 2 dimensional array from a string of options for a select tag in Javascript?
Can't retrieve values of options from select tag JavaScript
Using Javascript Executor to select from a Select tag
Adding/Removing/Updating options from select inputs
Using the <select> tag from HTML with JavaScript
Get data from select tag using JavaScript
Related Tags