将 <select> 标记与 Switch 语句一起使用（Java 和 HTML）答案

【问题标题】：Using <select> tags with a Switch statment (Java and HTML)将 <select> 标记与 Switch 语句一起使用（Java 和 HTML）
【发布时间】：2014-09-30 04:21:44
【问题描述】：

我正在为游戏创建一个计算器，我想使用下拉菜单在 switch 语句中选择一个值；虽然它似乎没有工作，但它总是返回 0。谁能看到我哪里出错了？另外，我对 java 和 html 还很陌生，如果有一个愚蠢的错误，我很抱歉。

http://jsfiddle.net/1r177khr/

这是我的html：

<form onsubmit="return calcDarkTroops(0);" style="display: inline;">
<!-- Title of Form /--> <font>Level</font> 
<!-- Gets Input /-->
<select id="minionlevel_input">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
</select>
<!-- Calls 'calcDarkTroops' /-->
<input type="button" value="Calculate" onclick="calcDarkTroops();">
<!-- Outputs result /--> <span id="minioncost_result"> = 0 Dark Elixer</span>

这是我的 Java：

calcDarkTroops = function () {
 var minionlevel = Number(document.getElementById("minionlevel_input").value);
 String maxString;
 switch (minionlevel) {
     case 1:
         maxString = "200,000";
         break;
     case 2:
         maxString = "190,000";
         break;
     case 3:
         maxString = "170,000";
         break;
     case 4:
         maxString = "140,000";
         break;
     case 5:
         maxString = "100,000";
         break;
     case 6:
         maxString = "0";

     document.getElementById("minioncost_result").innerHTML = "= " + Math.round(maxString * 100) / 100 + " Dark Elixer";

                        }

【问题讨论】：

控制台说 calcDarkTroops();未定义。
你的 Java 看起来像 javascript
String maxString -> var maxString
jsfiddle.net/arunpjohny/tdnLx83h/1

标签： javascript html switch-statement calculator

【解决方案1】：

尝试为您的选择选项提供 value 属性，并考虑提供默认选项，

<select id="minionlevel_input">
    <option value="0">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

FIDDLE

【讨论】：

【解决方案2】：

试试这个：

<form style="display: inline;">
<!-- Title of Form /--> <font>Level</font> 
<!-- Gets Input /-->
<select id="minionlevel_input">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
</select>
<!-- Calls 'calcDarkTroops' /-->
<input type="button" value="Calculate" onclick="return calcDarkTroops(document.getElementById('minionlevel_input').value)">
<!-- Outputs result /--> <span id="minioncost_result"> = 0 Dark Elixer</span>

<script>
 function calcDarkTroops(minionlevel) {
   var maxString;
   switch (minionlevel) {
     case '1':
         maxString = "200,000";
         break;
     case '2':
         maxString = "190,000";
         break;
     case '3':
         maxString = "170,000";
         break;
     case '4':
         maxString = "140,000";
         break;
     case '5':
         maxString = "100,000";
         break;
     case '6':
         maxString = "0";
         break;    
   }
     document.getElementById("minioncost_result").innerHTML = "= " + Math.round(parseInt(maxString) * 100) / 100 + " Dark Elixer";

}

看到这个fiddle

【讨论】：