如何创建JavaScript和HTML营业税计算器？

Question

Ok my problem is, I want to create a sales tax calculator. When the user, put the price of a item ( example a ball that cost 7 dollars) calculate their final price with the tax of 12%.

But.. not just that, I want, if the user pick some item ( ball: $7, toy $4 and candy $2.. = $13) sum that item and add the sales tax ( $13 + 12%).

in my code I have the basic structure dont worry for that.

Below i the code that i wrote, and dont works. I use HTML and Javascript.

Please help me.

 function CalculateIVU() { var price = document.forms.txts.value; var evaluation = price; var tax = 0.12 * evaluation; var final = +tax + +evaluation; document.getElementById('res').value = final; } 

 <form name="forms" id="forma"> <table> <tr> <td> <label>enter the value</label> <input type="text" name="txts" size=20> </br> <label>the tax is</label> <input type="text" name="resul" id="res"> </td> </tr> <tr> <td> <INPUT TYPE="button" NAME="one" VALUE=" 1 " OnClick="forms.txts.value += '1'"> <INPUT TYPE="button" NAME="two" VALUE=" 2 " OnCLick="forms.txts.value += '2'"> <INPUT TYPE="button" NAME="three" VALUE=" 3 " OnClick="forms.txts.value += '3'"> <INPUT TYPE="button" NAME="plus" VALUE=" + " OnClick="forms.txts.value += '+ '"> <br> <INPUT TYPE="button" NAME="four" VALUE=" 4 " OnClick="forms.txts.value += '4'"> <INPUT TYPE="button" NAME="five" VALUE=" 5 " OnCLick="forms.txts.value += '5'"> <INPUT TYPE="button" NAME="six" VALUE=" 6 " OnClick="forms.txts.value += '6'"> <br> <INPUT TYPE="button" NAME="seven" VALUE=" 7 " OnClick="forms.txts.value+= '7'"> <INPUT TYPE="button" NAME="eight" VALUE=" 8 " OnCLick="forms.txts.value += '8'"> <INPUT TYPE="button" NAME="nine" VALUE=" 9 " OnClick="forms.txts.value += '9'"> <br> <INPUT TYPE="button" NAME="clear" VALUE=" c " OnClick="forms.txts.value = ''" OnClick="forms.resul.value = ''"> <INPUT TYPE="button" NAME="zero" VALUE=" 0 " OnClick="forms.txts.value += '0'"> <INPUT TYPE="button" NAME="DoIt" VALUE=" = " OnClick="CalculateIVU() = eval(forms.txts.value);"> <br> <input type="button" id="input" value="Calcular" onClick='CalculateIVU();'> </td> </tr> </form> </div> 

Answer 1

Your code as shown works for a single value when pressing the Calcular button. The = button doesn't work because CalculateIVU() = eval(forms.txts.value); is invalid JavaScript: you can't assign a function call equal to something.

Your use of eval() is a simple way to do a mathematical calculation on a string that you know is in the format "1 + 2 + 3" , however, this is an input field where the user can type anything , so if the user enters "alert()" then using eval() will actually display an alert box. Even if they've tried to enter just numbers separated by plus signs they might have a typo or have forgotten to enter a + or something, leading to a syntax error when eval() ed.

You need to validate the input first.

One way to do that is with a regular expression . It's easy to write a simple regular expression that tests for any characters other than digits, decimal points, spaces, and plus signs, eg, /[^ \\d\\.+]/ , but that isn't enough because you might still have an invalid expression made up of valid characters, eg, "1+++2+3...4" . So here's a more complicated regex that should valid the whole string reasonably well:

/^\d{1,8}(\.\d{1,2})?( *\+ *\d{1,8}(\.\d{1,2})?)*$/

Explanation:

^                    // match beginning of string
\d{1,8}              // match from 1 to 8 digits
(\.\d{1,2})?         // match a . followed by 1 or 2 digits,
                     // where the parentheses and ? make it optional
(                    // start a group
 *\+ *               // match zero or more spaces then a + then zero or more spaces
\d{1,8}(\.\d{1,2})?  // as above, match 1-8 digits optionally followed 
                     // by a . and 1-2 digits
)                    // end of group
*                    // match the last group zero or more times
$                    // match the end of the string

In other words, that regex will match "1" or "1 + 1" or "1.2 + 2.3 + 3" (etc.), but not "1 + a" or "1 + + 1" or "1..2 + 3" . You can use the regex .test() method to see if a given string matches a regular expression.

So putting that into your function:

function CalculateIVU() {
  var price = document.forms.txts.value;
  if (!/^\d{1,8}(\.\d{1,2})?( *\+ *\d{1,8}(\.\d{1,2})?)*$/.test(price)) {
    alert("Invalid input");
    return false;
  }
  var sum = eval(price); // at this point we know price can be eval()ed
  var tax = 0.12 * sum;
  var final = sum + tax;
  document.getElementById('res').value = final.toFixed(2); // round
}

Working demo:

  function CalculateIVU() { var price = document.forms.txts.value; if (!/^\\d{1,8}(\\.\\d{1,2})?( *\\+ *\\d{1,8}(\\.\\d{1,2})?)*$/.test(price)) { alert("Invalid input"); return false; } var sum = eval(price); // at this point we know price can be eval()ed var tax = 0.12 * sum; var final = sum + tax; document.getElementById('res').value = final.toFixed(2); // round } 

 <form name="forms" id="forma"> <table> <tr> <td> <label>enter the value</label> <input type="text" name="txts" size=20> </br> <label>the tax is</label> <input type="text" name="resul" id="res"> </td> </tr> <tr> <td> <INPUT TYPE="button" NAME="one" VALUE=" 1 " OnClick="forms.txts.value += '1'"> <INPUT TYPE="button" NAME="two" VALUE=" 2 " OnCLick="forms.txts.value += '2'"> <INPUT TYPE="button" NAME="three" VALUE=" 3 " OnClick="forms.txts.value += '3'"> <INPUT TYPE="button" NAME="plus" VALUE=" + " OnClick="forms.txts.value += '+ '"> <br> <INPUT TYPE="button" NAME="four" VALUE=" 4 " OnClick="forms.txts.value += '4'"> <INPUT TYPE="button" NAME="five" VALUE=" 5 " OnCLick="forms.txts.value += '5'"> <INPUT TYPE="button" NAME="six" VALUE=" 6 " OnClick="forms.txts.value += '6'"> <br> <INPUT TYPE="button" NAME="seven" VALUE=" 7 " OnClick="forms.txts.value+= '7'"> <INPUT TYPE="button" NAME="eight" VALUE=" 8 " OnCLick="forms.txts.value += '8'"> <INPUT TYPE="button" NAME="nine" VALUE=" 9 " OnClick="forms.txts.value += '9'"> <br> <INPUT TYPE="button" NAME="clear" VALUE=" c " OnClick="forms.txts.value = ''" OnClick="forms.resul.value = ''"> <INPUT TYPE="button" NAME="zero" VALUE=" 0 " OnClick="forms.txts.value += '0'"> <INPUT TYPE="button" NAME="DoIt" VALUE=" = " OnClick="CalculateIVU();"> <br> <input type="button" id="input" value="Calcular" onClick='CalculateIVU();'> </td> </tr> </table> </form> 

PS For those who object to eval() for any purpose:

var sum = price.split(/ *\+ */).reduce(function(a,v) { return +a + +v; });