CODEWITHSUNDEEP
javascript
kingkobra813
kingkobra813

Reputation: 13

Trying to calculate a simple discount and sales tax in javascript

I'm just trying to input an number and then add 10% and then take that total and .08% tax. Can you please help me figure out what I'm doing wrong. I sure it is something simple I'm overlooking but I'm new to this and can't figure what is wrong.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Price tool</title>
</head>
<body>

  <form name="operation_form">
    <label style="font-size:20px"><b>Price Tool</b></label>
    <br/>
    <br/>
    <br/>
    <label>Item Price:  </label><input type="number" name='acertscore' value="" />
    <br/>
    <br/>
    <label><b>Total is:</b></label><input type="number" name="answerbox">
    <br/>
    <input type="button" value="Calculate" onclick="costCalc();" />
    <br/>
    <input type="button" value="Reset" onClick="this.form.reset()" />
  </form>
  
  <script type="text/javascript">
    function costCalc() {
      var form = document.forms["operation_form"];
      var x = form["acertscore"].value;
      var cost = (x * .1) + x;
      var answer = (cost * .08) + cost;
      form["answerbox"].value = answer;
    }
  </script>
  
</body>
</html>

Upvotes: 0

Views: 1222

Answers (3)

Tom Lynch
Tom Lynch

Reputation: 66

I logged the value of 'cost' in your code when I start with the value 100

  var cost = (x * .1) + x;
  console.log(cost);

and got a value of '10100'

But if I make sure that x is a number I get the correct value (110)

  var cost = (x * .1) +  Number(x);
  console.log(cost);

And I get 118.8 for the total.

Upvotes: 2

Thriggle
Thriggle

Reputation: 7049

When you retrieve the value from your input control, it comes through as a string value.

var x = form["acertscore"].value; // x is a string

If you convert this to a number immediately you'll avoid additional problems.

var x = Number(form["acertscore"].value); // x is a number


function costCalc() {
  var form = document.forms["operation_form"];
  var x = Number(form["acertscore"].value);
  var cost = (x * .1) + x;
  var answer = (cost * .08) + cost;
  form["answerbox"].value = answer;
}
<form name="operation_form">
  <label style="font-size:20px"><b>Price Tool</b></label>
  <br/>
  <br/>
  <br/>
  <label>Item Price:  </label><input type="number" name="acertscore" value="" />
  <br/>
  <br/>
  <label><b>Total is:</b></label><input type="number" name="answerbox">
  <br/>
  <input type="button" value="Calculate" onclick="costCalc();" />
  <br/>
  <input type="button" value="Reset" onClick="this.form.reset()" />
</form>

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42304

The problem is that your answer number is so long that it tries to display exponents. Because of this, the number gets treated as a string, though you've specified that the output goes into an <input> field with a type of number. Because your answer is not a number, it can't be displayed.

To resolve this, you can parse the output as a float before displaying it:

form["answerbox"].value = parseFloat(answer);


function costCalc() {
  var form = document.forms["operation_form"];
  var x = form["acertscore"].value;
  var cost = (x * .1) + x;
  var answer = (cost * .08) + cost;
  form["answerbox"].value = parseFloat(answer);
}
<form name="operation_form">
  <label style="font-size:20px"><b>Price Tool</b></label>
  <br/>
  <br/>
  <br/>
  <label>Item Price:  </label><input type="number" name='acertscore' value="" />
  <br/>
  <br/>
  <label><b>Total is:</b></label><input type="number" name="answerbox">
  <br/>
  <input type="button" value="Calculate" onclick="costCalc();" />
  <br/>
  <input type="button" value="Reset" onClick="this.form.reset()" />
</form>

Hope this helps!

Upvotes: -1

Related Questions