个人中心
gpt4 book ai didi

javascript - 计算总计后如何重置数字

转载 作者：行者123 更新时间：2023-11-28 14:08:46 25 4
gpt4 key购买 nike

第一次计算后如何清除总数？如果我在第一次计算后添加新元素，我希望它重置。现在它正在将其添加到前一个中。例如，对于第一个计算 (item1 + item2) = 总计如果我添加另一个元素，它将变为 (item1 + item 2) + (item1 + item2 + item3) = 总计

我想要的是它重置并计算添加新元素的新总数。

 var count = 0;
    var tax = 0.05;
    var taxFeild = document.getElementById("Tax");
    var checkBoxes = document.getElementById("checkBoxes");
    var checks=document.querySelectorAll('.items');
    var ItemTotal=document.getElementById('ItemTotal');
    var Total=document.getElementById('TotalWithTax');
    var btn = document.getElementById("btn");


function Calculate()
      {
       
       for(var i =0 ;i< checks.length;i++)
         {
           if(checks[i].checked)
             {
               count+=parseFloat(checks[i].value);
             }
         }
        ItemTotal.textContent += count;
        taxFeild.textContent += (parseFloat(tax*count).toFixed(2));
        Total.textContent += ((tax*count) + count).toFixed(2);
      }

        btn.addEventListener('click',Calculate);
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">

 
</head>
<body>

<h2 class="first-heading">Assignment 1</h2>
<div class="row">
  <div class="column">
      <div id="checkBoxes">
            <input type="checkbox" class="items" value='7.99'>Fried Chicken ($7.99)<br>
            <input type="checkbox" class="items" value='9.99'> Fried Halibut ($9.99)<br>
            <input type="checkbox" class="items" value='7.99'> Hamburger ($7.99)<br>  
            <input type="checkbox" class="items" value='12.99'> Grilled salmon($12.99)<br>
            <input type="checkbox" class="items" value='5.99'> Side salad ($5.99)<br>       
            <button id="btn">Calculate</button>  
        </div>
  </div>
  <div class="column" >
         
        <div id="Sums">
                <p id="ItemTotal"> Item Total: </p>
                <p id="Tax"> Tax: </p>
                <p id="TotalWithTax">Total with Tax: </p>      
        </div>
  </div>
</div>
<script src="java.js"></script>
 
</body>
</html>

最佳答案

你应该:

  • 声明 count Calculate 内的变量函数，以便每次单击按钮时都从 0 开始
  • 而不是 +=访问ItemTotal , TotalWithTax等字段，创建一个分配给文本的 inner 元素。因此，例如，而不是
<p id="ItemTotal"> Item Total: </p>

用途:

<p> Item Total: <span id="ItemTotal"></span></p>

这样，每当单击按钮时，您都可以简单地分配给 ItemTotal ，覆盖之前的内容。

var tax = 0.05;
var taxFeild = document.getElementById("Tax");
var checkBoxes = document.getElementById("checkBoxes");
var checks = document.querySelectorAll('.items');
var ItemTotal = document.getElementById('ItemTotal');
var Total = document.getElementById('TotalWithTax');
var btn = document.getElementById("btn");


function Calculate() {
  let count = 0;
  for (var i = 0; i < checks.length; i++) {
    if (checks[i].checked) {
      count += parseFloat(checks[i].value);
    }
  }
  ItemTotal.textContent = count;
  taxFeild.textContent = (parseFloat(tax * count).toFixed(2));
  Total.textContent = ((tax * count) + count).toFixed(2);
}

btn.addEventListener('click', Calculate);
<h2 class="first-heading">Assignment 1</h2>
<div class="row">
  <div class="column">
    <div id="checkBoxes">
      <input type="checkbox" class="items" value='7.99'>Fried Chicken ($7.99)<br>
      <input type="checkbox" class="items" value='9.99'> Fried Halibut ($9.99)<br>
      <input type="checkbox" class="items" value='7.99'> Hamburger ($7.99)<br>
      <input type="checkbox" class="items" value='12.99'> Grilled salmon($12.99)<br>
      <input type="checkbox" class="items" value='5.99'> Side salad ($5.99)<br>
      <button id="btn">Calculate</button>
    </div>
  </div>
  <div class="column">

    <div id="Sums">
      <p> Item Total: <span id="ItemTotal"></span></p>
      <p> Tax: <span id="Tax"></span></p>
      <p>Total with Tax: <span id="TotalWithTax"></span></p>
    </div>
  </div>
</div>

您还可以考虑围绕 input与<label> s，使它们更易于点击:

var taxRate = 0.05;

var checks = document.querySelectorAll('.items');
var subtotalSpan = document.getElementById('ItemTotal');
var taxSpan = document.getElementById("Tax");
var totalSpan = document.getElementById('TotalWithTax');

function Calculate() {
  let subtotal = 0;
  for (var i = 0; i < checks.length; i++) {
    if (checks[i].checked) {
      subtotal += parseFloat(checks[i].value);
    }
  }
  const tax = taxRate * subtotal;
  const total = tax + subtotal;
  
  subtotalSpan.textContent = subtotal;
  taxSpan.textContent = tax.toFixed(2);
  totalSpan.textContent = total.toFixed(2);
}

var btn = document.getElementById("btn");
btn.addEventListener('click', Calculate);
#checkBoxes > label {
  cursor: pointer;
}
<h2 class="first-heading">Assignment 1</h2>
<div class="row">
  <div class="column">
    <div id="checkBoxes">
      <label><input type="checkbox" class="items" value='7.99'>Fried Chicken ($7.99)</label><br>
      <label><input type="checkbox" class="items" value='9.99'> Fried Halibut ($9.99)</label><br>
      <label><input type="checkbox" class="items" value='7.99'> Hamburger ($7.99)</label><br>
      <label><input type="checkbox" class="items" value='12.99'> Grilled salmon($12.99)</label><br>
      <label><input type="checkbox" class="items" value='5.99'> Side salad ($5.99)</label><br>
      <button id="btn">Calculate</button>
    </div>
  </div>
  <div class="column">
    <div id="Sums">
      <p> Item Total: <span id="ItemTotal"></span></p>
      <p> Tax: <span id="Tax"></span></p>
      <p>Total with Tax: <span id="TotalWithTax"></span></p>
    </div>
  </div>
</div>

关于javascript - 计算总计后如何重置数字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60291278/

25 4 0
文章推荐： css - Internet Explorer - 弹出窗口时不触发 anchor 事件状态
文章推荐： css - 如何创建一个灵活的内容区域，其中有重复的背景图像，顶部和底部有固定的图像过渡/上限？
文章推荐： html - 创建图像网格 - bootstrap4
文章推荐： javascript - 更改圆环图的边框颜色
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com