使用（JavaScript和HTML）计算总计

Question

I am creating a calculator for a game and I have a drop down menu that selects a value in a switch statement; although I'm unsure of how I could calculate a total. Can anyone see if they can?

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

This is my 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>

This is my 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>

Answer 1

Fast and maybe not the most elegant solution

http://jsfiddle.net/9sjdujtn/

Simply return the number values from the 2 functions and use the return value in calctotal()

Speaking about better performance, I'd split calculations to one function and DOM manipulations to other one. Mine fiddle now redundantly rewrites innerHTML of 2 elements for no reason...

Answer 2

Use two hidden field and set value for it when calculating first two LEVEL using document.getElementById("").value. Then when click on total cost add these two value using function and set it in last span using document.getElementById("").innerHTML.