使用select标签中的选项作为Javascript的输入

时间：2015-08-03 13:36:25

标签： javascript html

到目前为止，我已经编写了以下代码：

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

代码向用户显示一个表，然后同时获取文本和选择框输入以运行脚本代码。我想在代码中修复的是选择选项。在脚本部分中，我概述了一些条件，这取决于用户选择哪些选项作为输入，但是我不确定如何实际使用这些值作为脚本代码的输入;特别是关于设定N值的部分。

非常感谢任何帮助：）

2 个答案:

答案 0 :(得分：1)

你的问题是这两行：

var N = parseInt(document.getElementById("Nature").value);
var WS = parseInt(document.getElementById("What-Stat").value);

您尝试将单词解析为整数。

删除parseInt()，你应该好好去：

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>

答案 1 :(得分：1)

您不应将parseInt()用于N和WS，并且代码中有许多重新定义的变量。更重要的是，将所有样式放在css文件中。 

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>

相关问题
最新问题