1

简而言之，我必须创建一个计算，输入 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>
4

2 回答 2

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会有一个前导的“$”，这将导致parseFloatreturn 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>

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

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

和

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

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

于 2012-10-12T00:56:56.673 回答
0

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:

<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

于 2012-10-12T00:22:58.160 回答