# How I can create a javascript and html sales tax calculator?

## How I can create a javascript and html sales tax calculator?

Your code as shown works for a single value when pressing the Calcular button. The = button doesnt work because `CalculateIVU() = eval(forms.txts.value);` is invalid JavaScript: you cant 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 theyve 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. Its easy to write a simple regular expression that tests for any characters other than digits, decimal points, spaces, and plus signs, e.g., `/[^ d.+]/`, but that isnt enough because you might still have an invalid expression made up of valid characters, e.g., `1+++2+3...4`. So heres 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)) {
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)) {
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>``````

P.S. For those who object to `eval()` for any purpose:

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

Related posts