使用(JavaScript和HTML)计算总计

时间:2014-09-30 06:29:59

标签: javascript html calculator

我正在为游戏创建一个计算器,我有一个下拉菜单,可以在switch语句中选择一个值;虽然我不确定如何计算总数。任何人都可以看看他们是否可以吗?

http://jsfiddle.net/newto98/8xLo9m9u/

这是我的HTML:

 <!-- Witch /-->
<div style="display: inline;">
<form style="display: inline;">
    <!-- Title of Form /--> <font>Level</font> 
    <!-- Gets Input /-->
    <select id="witchlevel_input">
        <option>0</option>
        <option>1</option>
        <option>2</option>
    </select>
    <!-- Calls 'calcwitch' /-->
    <input type="button" value="Calculate" onclick="return calcwitch(document.getElementById('witchlevel_input').value)">
    <!-- Outputs result /-->    <span id="witchcost_result"> = 0 Dark Elixer</span>

</form </div>
<br></br>
<!-- Lava Hound /-->
<div style="display: inline;">
    <form style="display: inline;">
        <!-- Title of Form /--> <font>Level</font> 
        <!-- Gets Input /-->
        <select id="lavalevel_input">
            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        <!-- Calls 'calclava' /-->
        <input type="button" value="Calculate" onclick="return calclava(document.getElementById('lavalevel_input').value)">
        <!-- Outputs result /-->    <span id="lavacost_result"> = 0 Dark Elixer</span>

    </form </div>
        <br></br>
<!-- Total /-->
<div style="display: inline;">
 <form onsubmit="return calctotal(0);" style="display: inline;">
 <!-- Title of Form /--> 
 <font>Total Cost</font> 
 <!-- Calls 'calcWalls' /-->
 <input type="button" value="Calculate" onclick="calctotal();">
 <!-- Outputs result /--> 
 <span id="total_result"> = 0 Elixer</span>
 </form>

这是我的javascript:

<script>
function calcwitch(witchlevel) {
var witchString;
switch (witchlevel) {
    case '0':
        witchString = "75000";
        break;
    case '1':
        witchString = "75000";
        break;
    case '2':
        witchString = "0";
        break;
}
document.getElementById("witchcost_result").innerHTML = "= " + Math.round(parseInt(witchString) * 100) / 100 + " Dark Elixer";

}

function calclava(lavalevel) {
var lavaString;
switch (lavalevel) {
    case '0':
        lavaString = "130000";
        break;
    case '1':
        lavaString = "130000";
        break;
    case '2':
        lavaString = "70000";
        break;
    case '3':
        lavaString = "0";
        break;
}
document.getElementById("lavacost_result").innerHTML = "= " + Math.round(parseInt(lavaString) * 100) / 100 + " Dark Elixer";

}
</script>

2 个答案:

答案 0 :(得分:1)

快速,也许不是最优雅的解决方案

http://jsfiddle.net/9sjdujtn/

只需返回2个函数中的数字值,然后使用calctotal()

中的返回值

谈到更好的性能,我将计算分解为一个函数,将DOM操作分成另一个函数。我的小提琴现在无缘无故地重写了2个元素的innerHTML ......

答案 1 :(得分:0)

使用document.getElementById(&#34;&#34;)。值计算前两个LEVEL时,使用两个隐藏字段并为其设置值。然后点击总费用时使用函数添加这两个值,并使用document.getElementById(&#34;&#34;)。innerHTML。

在最后一个范围内设置它。