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是future reserved word，不是ECMAScript的一部分。它一直是added to 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>

您不希望禁用总字段，因为它会禁用外观。此外，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;

您的总价值不应来自输入元素（至少对我来说没有意义）。你想在你的代码中定义它，零是标准做法。然后，您只需使用适当的变量初始化成本和税收，然后将它们相乘，将结果设置为＆＃34; total＆＃34;的值。变量

这应该绑定到一个事件（例如按钮点击或keydown / up），在输入字段被占用后触发。希望这有帮助！

第二部分

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

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 个答案:

第二部分