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

why the parseInt? For values like N you can replace the html code to have the right values: <option value="Beneficial">Beneficial</option> => <option value="1.1">Beneficial</option>. the same holds for the rest of the options. You should replace the value with the numbers you want to be able to make calculations. — nowhere
– nowhere, Commented Aug 3, 2015 at 13:39

iplus26 · Accepted Answer · 2015-08-03 14:02:59Z

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>

Johan Karlsson · Accepted Answer · 2015-08-03 13:44:44Z

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>

Collectives™ on Stack Overflow

Using options from select tag as inputs for Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related