Question

好的我的问题是，我想创建一个销售税计算器。当用户将一个项目的价格（例如一个花费7美元的球）计算出他们的最终价格时，税率为12％。

但是......不仅如此，我想，如果用户选择一些项目（球：$ 7，玩具$ 4和糖果$ 2 .. = $ 13），请加上该项目并添加销售税（$ 13 + 12％）。< / p>

在我的代码中，我有基本结构，不用担心。

下面是我编写的代码，但不起作用。我使用HTML和Javascript。

请帮帮我。

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

按 Calcular 按钮时，所示代码适用于单个值。 = 按钮不起作用，因为CalculateIVU() = eval(forms.txts.value);无效JavaScript：您无法分配等同于某事的函数调用。

使用eval()是一种简单的方法，对您知道格式为"1 + 2 + 3"的字符串进行数学计算，但是，这是一个输入字段，用户可以在其中输入任何，因此如果用户输入"alert()"，则使用eval()实际上会显示一个提示框。即使他们试图输入仅由加号分隔的数字，他们可能会输入错误或忘记输入+或其他内容，导致eval()时出现语法错误。

您需要先验证输入。

一种方法是使用regular expression。编写一个简单的正则表达式可以很容易地测试除了数字，小数点，空格和加号之外的任何字符，例如/[^ \d\.+]/，但这还不够，因为你可能仍然有一个无效的表达式组成有效字符，例如"1+++2+3...4"。所以这里有一个更复杂的正则表达式，应该可以很好地有效地使整个字符串有效：

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

说明：

^                    // 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

换句话说，该正则表达式将匹配"1"或"1 + 1"或"1.2 + 2.3 + 3"（等），但不匹配"1 + a"或"1 + + 1"或{{1 }}。您可以使用regex .test() method查看给定字符串是否与正则表达式匹配。

所以把它放到你的功能中：

"1..2 + 3"

工作演示：

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
}

    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
    }

P.S。对于那些出于任何目的反对<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>的人：

eval()

我如何创建一个JavaScript和HTML销售税计算器？

1 个答案: