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

Question

在坚果壳中，我必须创建一个输入4个数值的计算，然后将其乘以相加后的每单位价格，并将税额计入总计中。 我一直在浏览脚本，但是失败了。

编辑***：我已经从阅读和理解的内容中编辑了部分代码，但是仍然无法获得执行命令和执行含税值的功能。

 <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

在您的代码中：

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

const是将来的保留字，不属于ECMAScript。 它已添加到JavaScript中，并且可能在ECMAScript的将来版本中使用，但不应在一般网络上使用，因为它会在不支持它的浏览器中引发错误。

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

parseFloat接受单个字符串参数。 parseInt没有基数。 将字符串转换为数字的方法有很多，一种是一元+运算符，另一种是将Number称为函数。 parseFloat可能很好，只需键入更多即可。

由于您的控件位于表单中，因此可以更轻松地作为表单的命名属性来访问它们：

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

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

已经有一个名为TAX的变量，此值不在任何地方使用。

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

在这里， total的值被分配了两次，第二个替换了第一个。

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

这种类型的分配不利于维护，最好保持简单。 同样， total似乎会有一个前导“ $”，这将导致parseFloat返回NaN 。 最好将“ $”放在表单文本中，然后将值放在字段中。

您可以将复合运算符用于算术运算，它们可能会造成混淆，但是如果使用多次，将更容易发现。 也许您的意思是：

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

在HTML部分：

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

您不希望禁用total字段，因为这会使它显示为禁用状态。 另外，disabled属性不需要值（除非您使用的是XHTML，并且没有人在Web上实际使用它）。

您可以将字段设为只读：

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

但是用户会想知道为什么会有一个他们不能修改的字段。 考虑改为使其跨度并更新其文本或innerHTML：

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

和

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

然后，您还可以将内容设置为粗体或类似样式。

Answer 2

如果我对您的理解正确，您正在尝试从输入字段中收集一些数字，进行一些计算，然后打印结果？ 如果是这种情况，我会给你一个基本的例子：

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

total = cost*tax;

您的总价值不应该来自输入元素（至少对我而言这没有意义）。 相反，您希望在代码中定义它，零是标准做法。 然后，您只需使用适当的变量来初始化成本和税收，然后将它们相乘，然后将结果设置为“总计”变量的值即可。

这应该绑定到在使用了输入字段后要触发的事件（例如按钮单击或按下/按下）。 希望这可以帮助！

第二部分

这是对下面收到的评论的回应。 首先，您要创建一个函数来封装以下代码：

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;
}

这是相应的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>

这是一个工作示例： 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

第二部分

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

问题描述

2 个解决方案

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

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

第二部分

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

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