Question

嘿所有我想要更新我的代码。除了一件事，它几乎可以满足我的需求。两个技术上，但我主要关注的是一个。当我勾选我想要的方框时，它会像它应该的那样加起来并且像它应该的那样在顶部增加5％，但它将答案放在我的提交按钮的值中。我怎么能阻止这种情况发生？第二个（现在不太重要）如何将总值返回为仅有2个小数点的美元金额，因此不返回0.924，而是返回$ .92。谢谢！

<body>
<h1> The Fruit Form</h1>
<form action="" name="form1" id="form1">
<input type="checkbox" id='fruit0' value=".59" >Apples ( .59)<br>
<input type="checkbox" id='fruit1' value=".49">Oranges (.49)<br>
<input type="checkbox" id='fruit2' value=".39">Bananas(.39)<br>

<input type="submit" onclick="UpdateCost()" id="totalcost" value="Submit">

</form>
<script type="text/javascript">
function UpdateCost() {
  var sum = 0;
  var fid, elem;
  for (i=0; i<3; i++) {
    fid = 'fruit'+i;
    elem = document.getElementById(fid);
    if (elem.checked == true) { sum += Number(elem.value); }
  }
  document.getElementById('totalcost').value = sum.toFixed(2)*1.05;
  alert("Your Total Is:" + totalcost.value);
  return false
} 
</script>
</body>

Answer 1

您的提交按钮的ID为totalcost，您的函数会获取ID为totalcost的元素：

document.getElementById('totalcost').value = sum.toFixed(2)*1.05;

所以你可以通过不这样做来防止这种情况。

而不是sum.toFixed(2)*1.05，而不是PSL评论的(sum * 1.05).toFixed(2)。

相反，请更新您的变量：

sum = (sum * 1.05).toFixed(2);

或创建一个新变量说total：

var total = (sum * 1.05).toFixed(2);

或只是在输出值的地方处理它：

alert(  (sum * 1.05).toFixed(2)  );

额外：
由于你正在使用最多2个小数点的钱，我想让你知道在javascript 0.1 + 0.2不是0.3的事实！

避免这种情况的最佳方法是将所有数字乘以所需的精度，并将最终（子）结果除以输出的精度。

所以：（52美分+ 18美分= 70美分）/ 100 = 0.7（在这里你使用toFixed所以它变为0.70）。

Answer 2

只是一些代码评论：

如果您将 this 传递给该函数，可以获取对该表单的引用：

<input type="submit" onclick="UpdateCost(this)"  ...>

在功能中：

function UpdateCost(element) {
  var sum = 0;
  var fid, elem;

存储对表单的引用：

  var form = element.form;

  for (i=0; i<3; i++) {
    fid = 'fruit'+i;
    elem = document.getElementById(fid);

以上可以是：

    elem = form[fid];

    if (elem.checked == true) {
      sum += Number(elem.value);
    }

那可以是：

    sum += elem.checked? +elem.value : 0;

其中一元+会将值转换为数字。

  }
  document.getElementById('totalcost').value = sum.toFixed(2)*1.05;

变为：

  form.totalcost.value = '$' + (sum * 1.05).toFixed(2);

HTH。

如何使用javascript从复选框中对值进行求和

2 个答案: