堆棧內存溢出
  簡體   English   中英

使用select標簽中的選項作為Javascript的輸入

[英]Using options from select tag as inputs for Javascript

 原文  2015-08-03 13:36:25  7   2    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>

該代碼向用戶顯示一個表，然后同時使用文本和選擇框輸入來運行腳本代碼。 我要在代碼中修復的問題是使用select選項。 在腳本部分中，我概述了一些情況，具體取決於用戶選擇哪些選項作為輸入，但是我不確定如何實際使用這些值作為腳本代碼的輸入。 特別是有關設置N值的部分。

任何幫助將非常感激 ：）

2 個解決方案

解決方案1
 1  2015-08-03 13:44:44

您的問題是這兩行： 

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>

解決方案2
 1 已采納  2015-08-03 13:56:07

您不應該對N和WS使用parseInt() ，並且代碼中有許多變量的重新定義。 此外，將所有樣式都放在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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用 JavaScript 對 select 標簽中的選項進行分組 有沒有辦法用相同的選項來驗證html中的2 select標簽？ 使用JavaScript 使用JavaScript將選項列表添加到HTML5 select標簽 使用“for .. of”循環從 Vanilla JavaScript 中的 Select 標簽中刪除選項 如何從一串選項為Javascript中的select標簽構建二維數組？ 無法從選擇標簽JavaScript中檢索選項的值 使用Javascript Executor從Select標記中進行選擇 從選擇輸入中添加/刪除/更新選項 使用<select>使用 JavaScript 從 HTML 標記 使用 JavaScript 從 select 標簽獲取數據
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM