CODEWITHSUNDEEP
javascripthtmlcsscalculator
everythingEquals42
everythingEquals42

Reputation: 45

Not sure what's wrong with my simple code

I am unsure of what I have done wrong in my simple sales tax calculator. When I press submit I want a dollar amount of the item cost plus sales tax to be shown but instead I see total tip $functionround(){[native code]}.

  //calculation
  var total = (itemCost * salesTax + itemCost);

  total = Math.round

Upvotes: 0

Views: 72

Answers (3)

gavgrif
gavgrif

Reputation: 15489

As noted you need to return the total of hte Math.round - but you also need to parse the values into numbers) and then you also have to remember that the sales tax is a percentage - so it has to be divided by 100.

I have amended your logic to

a) parse the values of the inputs into numbers using parseInt()

b) resolve the math.round() issue

c) get the sales tax value by multiplying the item cost by the sales tax percentage ... itemCost * (salesTax/100)

d) add the sales tax value to the item cost ... item cost + (itemCost * (salesTax/100))...

//Function
function calculateTip() {
  var itemCost = parseInt(document.getElementById("itemCost").value);
  var salesTax = parseInt(document.getElementById("salesTax").value);
  //enter values window
  if (itemCost === "" || salesTax == "") {
    window.alert("Please enter the values!");
    return;
  }
  //calculation
  var total = Math.round(itemCost + (itemCost * salesTax/100));

  //display amount
  document.getElementById("totalTip").style.display = "block";
  document.getElementById("amount").innerHTML = total;
}
//Hide Tip Amount and call our function with a button
document.getElementById("totalTip").style.display = "none";

document.getElementById("submit").onclick = function() {
  calculateTip();
};
</head>

<body id="color">
  <div class="container" id="contain">
    <div class="text-center">
      <h1>Sales Tax Calculator</h1>
      <p> Amount Before Tax?</p>
      $ <input id="itemCost" type="text" placeholder="item cost">
      <p>Sales Tax Percentage?</p>
      <input id="salesTax" type="text" placeholder="sales tax percent"><br><br>

      <button type="submit" id="submit">submit</button>
    </div>
    <div class="container" ID="totalTip">
      <div class="text-center">
        <p>Total Tip</p>
        <sup>$</sup><span id="amount">0.00</span>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="javascript.js"></script>
</body>

Upvotes: 0

Nam V. Do
Nam V. Do

Reputation: 705

You should consider those codes on the calculation. Here is a simple tax calculator and it works well:

    function fmtPrice(value) {
                result="$"+Math.floor(value)+".";
                var cents=100*(value-Math.floor(value))+0.5;
                result += Math.floor(cents/10);
                result += Math.floor(cents%10);
                return result;
                }
                function compute() {
                var unformatted_tax = (document.forms[0].cost.value)*(document.forms[0].tax.value);
                document.forms[0].unformatted_tax.value=unformatted_tax;
                var formatted_tax = fmtPrice(unformatted_tax);
                document.forms[0].formatted_tax.value=formatted_tax;
                var cost3= eval( document.forms[0].cost.value );
                cost3 += eval( (document.forms[0].cost.value)*(document.forms[0].tax.value) );
                var total_cost = fmtPrice(cost3);
                document.forms[0].total_cost.value=total_cost;
                }
                function resetIt() {
                document.forms[0].cost.value="19.95"; // cost of product
                document.forms[0].tax.value=".06"; // tax value 
                document.forms[0].unformatted_tax.value="";
                document.forms[0].formatted_tax.value="";
                document.forms[0].total_cost.value="";
                }
<CENTER>
<FORM>
<TABLE BORDER=2 WIDTH=300 CELLPADDING=3>
<TR>
<TD align="center"><FONT SIZE=+1><STRONG>Cost</STRONG></FONT>
<TD align="center"><FONT SIZE=+1><STRONG>Tax</STRONG></FONT>
</TR>
<TR>
<TD align="center"><INPUT TYPE="text" NAME="cost" VALUE="19.95" SIZE=10>
<TD align="center"><INPUT TYPE="text" NAME="tax" VALUE=".06" SIZE=10>
</TR>
</TABLE>
<BR>
<TABLE BORDER=1 WIDTH=600 CELLPADDING=3>
<TR>
<TD align="center"><FONT SIZE=+1><STRONG>Unformatted Tax</STRONG></FONT>
<TD align="center"><FONT SIZE=+1><STRONG>Formatted Tax</STRONG></FONT>
<TD align="center"><FONT SIZE=+1><STRONG>TOTAL COST</STRONG></FONT>
</TR>
<TR>
<TD align="center"><INPUT TYPE="text" NAME="unformatted_tax" SIZE=15>
<TD align="center"><INPUT TYPE="text" NAME="formatted_tax" SIZE=15>
<TD align="center"><INPUT TYPE="text" NAME="total_cost" SIZE=15>
</TR>
</TABLE>
<BR>
<TABLE BORDER=0 WIDTH=400 CELLPADDING=5>
<TR>
<TD align="center"><INPUT TYPE="reset"  VALUE="RESET" onClick="resetIt()">
<TD align="center"><INPUT TYPE="button" VALUE="COMPUTE" onclick="compute()">
</TR>
</TABLE>
</CENTER>

Upvotes: 0

Mark
Mark

Reputation: 989

total = Math.round

In the line above you are assigning the value of the function Math.round to the variable total. Instead you probably want to assign the value returned by the function Math.round to your total variable like this:

total = Math.round(total)

Upvotes: 1

Related Questions