文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >两次添加相同项时出现的总体错误

问两次添加相同项时出现的总体错误
EN

Stack Overflow用户
提问于 2018-12-01 14:33:01
回答 1查看 62关注 0票数 0

在添加项目的总数时出错

我正在执行教授给我的一项练习Javascript的作业。目前，我发现我输入的公式有什么问题。

我用铬做了调试，并向我展示了以下结果：

当我一次把两个单独的项目加在一起时，之和是正确的。 当我将同一项加两次时，之和增加了两倍： 所有代码的性能都很好，直到它进入prelim.js的第17行，在第17行显示输出。

这是输出的屏幕截图：(请原谅，如果它在链接中，网站告诉我，我不能显示图片，因为我还没有那么多的声誉:)

这是示例程序。

也是代码：

​

代码语言：javascript
复制
var total=0;

function add (val) {
	var itemName = document.getElementById('item' + val).innerHTML
	var price = document.getElementById('price' + val).innerHTML
	var subtotal = document.getElementById('subtotal' + val).innerHTML
	price = price.replace('P ', '');
	price = parseFloat(price);
	var value = parseFloat(subtotal) + price;
	document.getElementById('subtotal' + val).innerHTML = value.toFixed(2);


	//totality
	total+=value;

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

function subtract (val) {

	//get values from list ids

	var itemName = document.getElementById('item' + val).innerHTML
	var price = document.getElementById('price' + val).innerHTML
	var subtotal = document.getElementById('subtotal' + val).innerHTML

	//convert price id to float 0.2 value

	price = price.replace('P ', '');
	price = parseFloat(price);

	var value = parseFloat(subtotal);
	//error trapping to prevent negative value
	total -= value;
	value= value - price;

	if (value < 0){
		return false
	}
	//output
	document.getElementById('subtotal' + val).innerHTML = value.toFixed(2);
	document.getElementById('totality').innerHTML = total.toFixed(2);
}


//summary of purchases
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>PRELIM POS</title>
  <style>
    body>div {
      display: flex;
      flex-direction: column;
      width: 65%;
      margin: 0 auto;
    }
    
    li {
      list-style-type: none;
      display: flex;
      justify-content: space-between;
      padding: .6em 0;
    }
    
    li>div {
      width: 25%;
    }
    
    li>div:first-child {
      width: 40%;
    }
    
    .list0 {
      font-weight: bold;
    }
    
    .container {
      border-width: medium;
      border-style: solid;
      border-color: grey;
      border-spacing: 20rem;
    }
  </style>
</head>

<body>
  <div class="container">

    <li class="list0">
      <div id="item0">Line Item</div>
      <div id="price0">Price</div>
      <div id="quantity0">Quantity</div>
      <div id="subtotal0">Subtotal</div>

    </li>

    <li class="list1">
      <div id="item1">Korean Bibimbap</div>
      <div id="price1">P 115.00</div>
      <div id="quantity1">
        <button onclick="add(1)">+</button>
        <button onclick="subtract(1)">-</button>
      </div>
      <div id="subtotal1">0.00</div>
    </li>
    <li class="list2">
      <div id="item2">Italian Ala king</div>
      <div id="price2">P 115.00</div>
      <div id="quantity2">
        <button onclick="add(2)">+</button>
        <button onclick="subtract(2)">-</button>
      </div>
      <div id="subtotal2">0.00</div>
    </li>
    <li class="list3">
      <div id="item3">Krushers</div>
      <div id="price3">P 80.00</div>
      <div id="quantity3">
        <button onclick="add(3)">+</button>
        <button onclick="subtract(3)">-</button>
      </div>
      <div id="subtotal3">0.00</div>
    </li>
    <li class="list4">
      <div id="item4">Spanish Salpicao</div>
      <div id="price4">P 115.00</div>
      <div id="quantity4">
        <button onclick="add(4)">+</button>
        <button onclick="subtract(4)">-</button>
      </div>
      <div id="subtotal4">0.00</div>
    </li>
    <li class="list5">
      <div id="item5">Zinger</div>
      <div id="price5">P 95.00</div>
      <div id="quantity5">
        <button onclick="add(5)">+</button>
        <button onclick="subtract(5)">-</button>
      </div>
      <div id="subtotal5">0.00</div>
    </li>
    <li class="list6">
      <div id="item6">California Maki Twister</div>
      <div id="price6">P 85.00</div>
      <div id="quantity6">
        <button onclick="add(6)">+</button>
        <button onclick="subtract(6)">-</button>
      </div>
      <div id="subtotal6">0.00</div>
    </li>
    <li class="list7">
      <div id="item7">Hot n' Cheesy Chicken</div>
      <div id="price7">P 99.00</div>
      <div id="quantity7">
        <button onclick="add(7)">+</button>
        <button onclick="subtract(7)">-</button>
      </div>
      <div id="subtotal7">0.00</div>
    </li>
    <li class="list8">
      <div id="item8">Flavor Shots</div>
      <div id="price8">P 66.00</div>
      <div id="quantity8">
        <button onclick="add(8)">+</button>
        <button onclick="subtract(8)">-</button>
      </div>
      <div id="subtotal8">0.00</div>
    </li>
    <li class="list9">
      <div id="item9">Crispy Fries</div>
      <div id="price9">P 55.00</div>
      <div id="quantity9">
        <button onclick="add(9)">+</button>
        <button onclick="subtract(9)">-</button>
      </div>
      <div id="subtotal9">0.00</div>
    </li>
    <li class="list10">
      <div id="item10">Chizza</div>
      <div id="price10">P 100.00</div>
      <div id="quantity10">
        <button onclick="add(10)">+</button>
        <button onclick="subtract(10)">-</button>
      </div>
      <div id="subtotal10">0.00</div>
    </li>
    <li class="list11">
      <div id="item11">Famous Bowl</div>
      <div id="price11">P 115.00</div>
      <div id="quantity11">
        <button onclick="add(11)">+</button>
        <button onclick="subtract(11)">-</button>
      </div>
      <div id="subtotal11">0.00</div>
    </li>
    <li class="list12">
      <div id="item12">Regular Bucket Meal</div>
      <div id="price12">P 570.00</div>
      <div id="quantity12">
        <button onclick="add(12)">+</button>
        <button onclick="subtract(12)">-</button>
      </div>
      <div id="subtotal12">0.00</div>
    </li>
    <li class="list13">
      <div id="item13">Rice</div>
      <div id="price13">P 25.00</div>
      <div id="quantity13">
        <button onclick="add(13)">+</button>
        <button onclick="subtract(13)">-</button>
      </div>
      <div id="subtotal13">0.00</div>
    </li>
    <li class="list14">
      <div id="item14">2pc Chicken Meal</div>
      <div id="price14">P 155.00</div>
      <div id="quantity14">
        <button onclick="add(14)">+</button>
        <button onclick="subtract(14)">-</button>
      </div>
      <div id="subtotal14">0.00</div>
    </li>
    <li class="list15">
      <div id="item15">Coleslaw</div>
      <div id="price15">P 45.00</div>
      <div id="quantity15">
        <button onclick="add(15)">+</button>
        <button onclick="subtract(15)">-</button>
      </div>
      <div id="subtotal15">0.00</div>
    </li>

    <!-- totality -->
  </div>

  <div class="container1">
    <h3>Summary:</h3> <br>
    <p>

    </p>
    <h3>Total: </h3>
    <div id="totality">0.00</div>


  </div>
  <script src="../prelim.js"></script>
</body>

</html>

​

javascript
html
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-01 15:05:43

若要确定价格的加减，则应计算subTotal，但只将价格添加到总价格中。

您可以将添加和减法函数更新为：

代码语言：javascript
复制
function add (val) {
    var priceElm = document.getElementById('price' + val);
    var subtotalElm = document.getElementById('subtotal' + val);
    var totalityElm =  document.getElementById('totality');
    var price = parseFloat(priceElm.innerHTML.replace('P ', ''));

    var subTotal = parseFloat(subtotalElm.innerHTML) + price;
    var totality = parseFloat(totalityElm.innerHTML) + price;

    subtotalElm.innerHTML = subTotal.toFixed(2);
    totalityElm.innerHTML = totality.toFixed(2);
}

function subtract (val) {
    var priceElm = document.getElementById('price' + val);
    var subtotalElm = document.getElementById('subtotal' + val);
    var totalityElm =  document.getElementById('totality');
    var price = parseFloat(priceElm.innerHTML.replace('P ', ''));

    var subTotal = parseFloat(subtotalElm.innerHTML) - price;
    var totality = parseFloat(totalityElm.innerHTML) - price;

    if (subTotal < 0){
        return false
    }

    subtotalElm.innerHTML = subTotal.toFixed(2);
    totalityElm.innerHTML = totality.toFixed(2);
}

​

代码语言：javascript
复制
function add(val) {
  var priceElm = document.getElementById('price' + val);
  var subtotalElm = document.getElementById('subtotal' + val);
  var totalityElm = document.getElementById('totality');
  var price = parseFloat(priceElm.innerHTML.replace('P ', ''));

  var subTotal = parseFloat(subtotalElm.innerHTML) + price;
  var totality = parseFloat(totalityElm.innerHTML) + price;

  subtotalElm.innerHTML = subTotal.toFixed(2);
  totalityElm.innerHTML = totality.toFixed(2);
}

function subtract(val) {
  var priceElm = document.getElementById('price' + val);
  var subtotalElm = document.getElementById('subtotal' + val);
  var totalityElm = document.getElementById('totality');
  var price = parseFloat(priceElm.innerHTML.replace('P ', ''));

  var subTotal = parseFloat(subtotalElm.innerHTML) - price;
  var totality = parseFloat(totalityElm.innerHTML) - price;

  if (subTotal < 0) {
    return false
  }

  subtotalElm.innerHTML = subTotal.toFixed(2);
  totalityElm.innerHTML = totality.toFixed(2);
}
代码语言：javascript
复制
body>div {
  display: flex;
  flex-direction: column;
  width: 65%;
  margin: 0 auto;
}

li {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  padding: .6em 0;
}

li>div {
  width: 25%;
}

li>div:first-child {
  width: 40%;
}

.list0 {
  font-weight: bold;
}

.container {
  border-width: medium;
  border-style: solid;
  border-color: grey;
  border-spacing: 20rem;
}
代码语言：javascript
复制
<div class="container">

  <li class="list0">
    <div id="item0">Line Item</div>
    <div id="price0">Price</div>
    <div id="quantity0">Quantity</div>
    <div id="subtotal0">Subtotal</div>

  </li>

  <li class="list1">
    <div id="item1">Korean Bibimbap</div>
    <div id="price1">P 115.00</div>
    <div id="quantity1">
      <button onclick="add(1)">+</button>
      <button onclick="subtract(1)">-</button>
    </div>
    <div id="subtotal1">0.00</div>
  </li>
  <li class="list2">
    <div id="item2">Italian Ala king</div>
    <div id="price2">P 115.00</div>
    <div id="quantity2">
      <button onclick="add(2)">+</button>
      <button onclick="subtract(2)">-</button>
    </div>
    <div id="subtotal2">0.00</div>
  </li>
  <li class="list3">
    <div id="item3">Krushers</div>
    <div id="price3">P 80.00</div>
    <div id="quantity3">
      <button onclick="add(3)">+</button>
      <button onclick="subtract(3)">-</button>
    </div>
    <div id="subtotal3">0.00</div>
  </li>
  <li class="list4">
    <div id="item4">Spanish Salpicao</div>
    <div id="price4">P 115.00</div>
    <div id="quantity4">
      <button onclick="add(4)">+</button>
      <button onclick="subtract(4)">-</button>
    </div>
    <div id="subtotal4">0.00</div>
  </li>
  <li class="list5">
    <div id="item5">Zinger</div>
    <div id="price5">P 95.00</div>
    <div id="quantity5">
      <button onclick="add(5)">+</button>
      <button onclick="subtract(5)">-</button>
    </div>
    <div id="subtotal5">0.00</div>
  </li>
  <li class="list6">
    <div id="item6">California Maki Twister</div>
    <div id="price6">P 85.00</div>
    <div id="quantity6">
      <button onclick="add(6)">+</button>
      <button onclick="subtract(6)">-</button>
    </div>
    <div id="subtotal6">0.00</div>
  </li>
  <li class="list7">
    <div id="item7">Hot n' Cheesy Chicken</div>
    <div id="price7">P 99.00</div>
    <div id="quantity7">
      <button onclick="add(7)">+</button>
      <button onclick="subtract(7)">-</button>
    </div>
    <div id="subtotal7">0.00</div>
  </li>
  <li class="list8">
    <div id="item8">Flavor Shots</div>
    <div id="price8">P 66.00</div>
    <div id="quantity8">
      <button onclick="add(8)">+</button>
      <button onclick="subtract(8)">-</button>
    </div>
    <div id="subtotal8">0.00</div>
  </li>
  <li class="list9">
    <div id="item9">Crispy Fries</div>
    <div id="price9">P 55.00</div>
    <div id="quantity9">
      <button onclick="add(9)">+</button>
      <button onclick="subtract(9)">-</button>
    </div>
    <div id="subtotal9">0.00</div>
  </li>
  <li class="list10">
    <div id="item10">Chizza</div>
    <div id="price10">P 100.00</div>
    <div id="quantity10">
      <button onclick="add(10)">+</button>
      <button onclick="subtract(10)">-</button>
    </div>
    <div id="subtotal10">0.00</div>
  </li>
  <li class="list11">
    <div id="item11">Famous Bowl</div>
    <div id="price11">P 115.00</div>
    <div id="quantity11">
      <button onclick="add(11)">+</button>
      <button onclick="subtract(11)">-</button>
    </div>
    <div id="subtotal11">0.00</div>
  </li>
  <li class="list12">
    <div id="item12">Regular Bucket Meal</div>
    <div id="price12">P 570.00</div>
    <div id="quantity12">
      <button onclick="add(12)">+</button>
      <button onclick="subtract(12)">-</button>
    </div>
    <div id="subtotal12">0.00</div>
  </li>
  <li class="list13">
    <div id="item13">Rice</div>
    <div id="price13">P 25.00</div>
    <div id="quantity13">
      <button onclick="add(13)">+</button>
      <button onclick="subtract(13)">-</button>
    </div>
    <div id="subtotal13">0.00</div>
  </li>
  <li class="list14">
    <div id="item14">2pc Chicken Meal</div>
    <div id="price14">P 155.00</div>
    <div id="quantity14">
      <button onclick="add(14)">+</button>
      <button onclick="subtract(14)">-</button>
    </div>
    <div id="subtotal14">0.00</div>
  </li>
  <li class="list15">
    <div id="item15">Coleslaw</div>
    <div id="price15">P 45.00</div>
    <div id="quantity15">
      <button onclick="add(15)">+</button>
      <button onclick="subtract(15)">-</button>
    </div>
    <div id="subtotal15">0.00</div>
  </li>

  <!-- totality -->
</div>

<div class="container1">
  <h3>Summary:</h3> <br>
  <p>

  </p>
  <h3>Total: </h3>
  <div id="totality">0.00</div>


</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/53571801

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档