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)) {
    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>

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

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

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

Related posts

Leave a Reply

Your email address will not be published.