计算4个数值和税款的JavaScript计算器乘以总数

Question

In a nut shell i have to create a calculate that input 4 numerical values which is then multiplied by the price per unit added up and the tax calculated into the total. 在坚果壳中，我必须创建一个输入4个数值的计算，然后将其乘以相加后的每单位价格，并将税额计入总计中。 I have been surfing for scripts but fail. 我一直在浏览脚本，但是失败了。

EDIT***: I have edited parts of the code from what I have read and understood but still can not get my function to execute the commands and execute a value with the tax. 编辑***：我已经从阅读和理解的内容中编辑了部分代码，但是仍然无法获得执行命令和执行含税值的功能。

 <html>
<head>
<title>Purchase&Tip Calculator</title>
function calculate() {
    var total = cost*total;
    var cost = document.getElementById("cost").value;
    var tax = document.getElementById("tax").value;

    total = cost*tax;
    document.getElementById("total").value = total;
}
</script>

</head>

<body>

<h1 align="left">Purchase&Tip Calculator</h1>

<input type="text" id="cost" />

<input type="text" id="cost" />

<input type="text" id="cost" />

<input type="text" id="tax" />

<input type="text" id="total" />

<button id="cost" onclick="calculate()" value="Calculate!" />Calculate!</button>
    </form>
</body>
</html>

Answer 1

In your code: 在您的代码中：

> function fixOrder() {
>     const TAX = 0.975;

const is a future reserved word and not part of ECMAScript. const是将来的保留字，不属于ECMAScript。 It has been added to JavaScript , and may be in a future version of ECMAScript, but should not be used on the general web as it will throw an error in browsers that don't support it. 它已添加到JavaScript中，并且可能在ECMAScript的将来版本中使用，但不应在一般网络上使用，因为它会在不支持它的浏览器中引发错误。

>    var numPrice;
>    var total;
>    var tax;
> 
>    numPrice = parseFloat(document.getElementById("cost").value, 10);

parseFloat accepts a single string argument. parseFloat接受单个字符串参数。 There is no radix as for parseInt. parseInt没有基数。 There are many ways of converting a string to a number, one is the unary + operator, another is Number called as a function. 将字符串转换为数字的方法有很多，一种是一元+运算符，另一种是将Number称为函数。 parseFloat is probably fine, just more to type. parseFloat可能很好，只需键入更多即可。

Since your controls are in a form, you can access them more easily as named properties of the form: 由于您的控件位于表单中，因此可以更轻松地作为表单的命名属性来访问它们：

  var form = document.getElementById('form');
  numPrice = +form.cost.value;

>    tax      = parseFloat(document.getElementById("tax").value, 10);

There is already a variable named TAX , this value isn't used anywhere. 已经有一个名为TAX的变量，此值不在任何地方使用。

>    total    = parseFloat(document.getElementById("total").value, 10);
>    numPrice = numPrice * TAX;
>    total    = numPrice;

Here the value of total is assigned twice, the second replaces the first. 在这里， total的值被分配了两次，第二个替换了第一个。

>    total    = document.getElementById("total").value = "$" + total.toFixed(2);

This type of assignment is not good for maintenance, much better to keep it simple. 这种类型的分配不利于维护，最好保持简单。 Also it appears that total will have a leading "$", which will cause parseFloat to return NaN . 同样， total似乎会有一个前导“ $”，这将导致parseFloat返回NaN 。 Better to put the "$" in the text of the form and just put the value in the field. 最好将“ $”放在表单文本中，然后将值放在字段中。

You can use compound operators for arithmetic, they can confuse but if used a number of times become easier to spot. 您可以将复合运算符用于算术运算，它们可能会造成混淆，但是如果使用多次，将更容易发现。 Perhaps you meant: 也许您的意思是：

  total = parseFloat(form.total.value);
  numPrice *= TAX;
  total += numPrice;
  form.total.value = total.toFixed(2);

In the HTML part: 在HTML部分：

>  <p>Total: <input type="text" id="total" name="total" value="" disabled=
   "disabled" /></p>

You don't want the total field to be disabled as that gives it a disabled appearance. 您不希望禁用total字段，因为这会使它显示为禁用状态。 Also, the disabled attribute does not require a value (unless you are using XHTML, and no one actually uses it on the web). 另外，disabled属性不需要值（除非您使用的是XHTML，并且没有人在Web上实际使用它）。

You can make the field readonly: 您可以将字段设为只读：

 <p>Total: $<input type="text" name="total" readonly></p>

but users will wonder why there is a field they can't modify. 但是用户会想知道为什么会有一个他们不能修改的字段。 Consider instead making it a span and update its text or innerHTML: 考虑改为使其跨度并更新其文本或innerHTML：

 <p>Total: $<span id="total">0.00</span></p>

and 和

  document.getElementById('total').innerHTML = total.toFixed(2);

Then you can also style the content as bold or simlar. 然后，您还可以将内容设置为粗体或类似样式。

Answer 2

If I understand you correctly, you are attempting to gather a few numbers from input fields, do some calculations, and print the result? 如果我对您的理解正确，您正在尝试从输入字段中收集一些数字，进行一些计算，然后打印结果？ If that's the case I'll give you a base example: 如果是这种情况，我会给你一个基本的例子：

var total = 0;
var cost = document.getElementById("cost").value;
var tax = document.getElementById("tax").value;

total = cost*tax;

Your total value shouldn't be coming from an input element (at least that doesn't make sense to me). 您的总价值不应该来自输入元素（至少对我而言这没有意义）。 You instead want to define it within your code, zero is standard practice. 相反，您希望在代码中定义它，零是标准做法。 Then you simply initialize cost and tax with the appropriate variables and multiply them together, setting that result as the value of your "total" variable. 然后，您只需使用适当的变量来初始化成本和税收，然后将它们相乘，然后将结果设置为“总计”变量的值即可。

This should be bound to an event (such as a button click or a keydown/up) to be fired after the input fields have been appropriated. 这应该绑定到在使用了输入字段后要触发的事件（例如按钮单击或按下/按下）。 Hope this helps! 希望这可以帮助！

Part II 第二部分

This is in response to the received comment below. 这是对下面收到的评论的回应。 First you want to create a function to encapsulate this code: 首先，您要创建一个函数来封装以下代码：

function calculate() {
    var total = 0;
    var cost = document.getElementById("cost").value;
    var tax = document.getElementById("tax").value;

    total = cost*tax;
    document.getElementById("total").value = total;
}

Here is the corresponding HTML: 这是相应的HTML：

<input type="text" id="cost" />
<input type="text" id="tax" />
<input type="text" id="total" />
<button id="cost" onclick="calculate()" value="Calculate!" />Calculate!</button>

Here is a working example: http://fluidev.com/stack/calculate/index.html 这是一个工作示例： http : //fluidev.com/stack/calculate/index.html

计算4个数值和税款的JavaScript计算器乘以总数

问题描述

2 个解决方案

解决方案1
1 2012-10-12 00:56:56

解决方案2
0 2012-10-12 00:22:58

Part II 第二部分

计算4个数值和税款的JavaScript计算器乘以总数

问题描述

2 个解决方案

解决方案1 1 2012-10-12 00:56:56

解决方案2 0 2012-10-12 00:22:58

Part II 第二部分

解决方案1
1 2012-10-12 00:56:56

解决方案2
0 2012-10-12 00:22:58