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

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

转载作者：行者123 更新时间：2023-11-28 14:08:46

第一次计算后如何清除总数？如果我在第一次计算后添加新元素，我希望它重置。现在它正在将其添加到前一个中。例如，对于第一个计算 (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/

文章推荐： css - Internet Explorer - 弹出窗口时不触发 anchor 事件状态

文章推荐： html - 创建图像网格 - bootstrap4

文章推荐： javascript - 更改圆环图的边框颜色

node.js - Chrome 的跟踪事件分析工具中的自上而下(树)、自上而下(重)和自下而上(重)有什么区别
我正在尝试使用谷歌浏览器的 Trace Event Profiling Tool分析我正在运行的 Node.js 应用程序。选择点样本后，我可以在三种 View 之间进行选择: 自上而下(树) 自上而
android - 重 ContentProvider 查询和 ListView
对于一个可能是菜鸟的问题，我们深表歉意，但尽管在 SO 上研究了大量教程和其他问题，但仍找不到答案。我想做的很简单:显示一个包含大量数据库存储字符串的 Android ListView。我所说的“很
css - 基础 5 div 重
我已经开始了一个新元素的工作，并决定给 Foundation 5 一个 bash，看看它是什么样的。在创建带有水平字段的表单时，我在文档中注意到的第一件事是它们使用大量 div 来设置样式。所以我在下
.net - 重 CPU 负载下的跨线程 BeginInvoke 阻塞
我有一个 Windows 窗体用户控件，其中包含一个使用 BeginInvoke 委托(delegate)调用从单独线程更新的第 3 方图像显示控件。在繁重的 CPU 负载下，UI 会锁定。当我附加
javascript - 什么是测试 Dom 重 js 的好方法？
我有一堆严重依赖dom元素的JS代码。我目前使用的测试解决方案依赖于 Selenium ，但 AFAIK 无法正确评估 js 错误(addScript 错误不会导致您的测试失败，而 getEval 会
Java Swing 重/慢 paintComponent - 有什么建议吗？
我正在制作一款基于滚动 2D map /图 block 的游戏。每个图 block (存储为图 block [21][11] - 每个 map 总共 231 个图 block )最多可以包含 21 个
javascript - 在网页上 - 如何显示(轻)图像并在客户端下载后者时将其替换为(重)图像？
考虑到以下情况，我是前端初学者: 某个 HTML 页面应该包含一个沉重的图像(例如 - 动画 gif)，但我不想强制客户缓慢地等待它完全下载才能享受一个漂亮的页面，而是我更愿意给他看一个轻量级图像(例
python - 重 I/O 和 python 多处理/多线程
我正在设计一个小软件，其中包括: 在互联网上获取资源，一些用户交互(资源的快速编辑)，一些处理。我想使用许多资源(它们都列在列表中)来这样做。每个都独立于其他。由于编辑部分很累，我想让用户(可能
c# - 重 I/O 操作中的 Parallel.ForEach 与异步 For 循环
我想比较两个理论场景。为了问题的目的，我简化了案例。但基本上它是您典型的生产者消费者场景。 (我关注的是消费者)。我有一个很大的Queue dataQueue我必须将其传输给多个客户端。那么让我们
python - K 重 CV 的变体，其中 size(test_set) > N/K
我有一个二元分类问题，标签 0 和 1(少数)存在巨大不平衡。由于测试集带有标签 1 的行太少，因此我将训练测试设置为至少 70-30 或 60-40，因此仍然有重要的观察结果。由于我没有过多地衡量准

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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