Calculating a total using (JavaScript and 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>

The code you posted does not match the contents of the JSFiddle — personne3000
– personne3000, Commented Sep 30, 2014 at 6:39
also please fix your fiddle, you bothered to make one at least do it right — hahaha
– hahaha, Commented Sep 30, 2014 at 6:44

ladar · Accepted Answer · 2014-09-30 07:45:36Z

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

edited Sep 30, 2014 at 7:45

answered Sep 30, 2014 at 6:47

ladar

5,8864 gold badges29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jobayer · Accepted Answer · 2014-09-30 07:18:28Z

0

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.

answered Sep 30, 2014 at 7:18

Jobayer

1,2311 gold badge14 silver badges23 bronze badges

Collectives™ on Stack Overflow

Calculating a total using (JavaScript and HTML)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related