两次添加同一项目时出现总计错误

时间：2018-12-01 14:33:02

标签： javascript html

添加项目总数时出错

我正在按照我们教授的任务练习Java语言。 目前，我在查找输入的ive输入法有问题时遇到问题。

我已经在chrome中对其进行了调试，并向我显示了以下结果：

  

当我将两个单独的项目加在一起1次时，总和是正确的。

     

当我两次添加同一项目时，总和增加了三倍：

     

每个代码的性能都很好，直到prelim.js的第17行显示输出为止。

以下是输出的屏幕截图： （请原谅，如果它在链接中，该网站会告诉我我无法显示图片，因为我还没有那么高的声誉：））

This is the sample program.

还有代码： 

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 
<!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>

2 个答案:

答案 0 :(得分：0)

要确定价格的加法和减法，应计算小计，而仅将价格加到总计中。

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

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);
}


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);
}
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;
}
<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>

答案 1 :(得分：0)

那个权利=>总计+ = price_v;不是总计+ =小计。

另一方面，最好使用“ use strict”来学习：
=>（类型=字符串）var price = document.getElementById（'price'+ val）.innerHTML type =字符串
=>（类型=数字）price = parseFloat（price）;
==>更改类型时出错；

错误ID为2乘以相同的代码以进行加减，两者使用相同的功能，只是使用不同的符号。 更少的代码，更多的理解。

"use strict"

var total=0;

function add(val) {
    var
        sign          = (val>0) ? +1 : -1,
        ref           = (val>0) ? val : -val,
        //itemName_t  = document.getElementById('item' + ref).textContent,
        price_t       = document.getElementById('price' + ref).textContent,
        subtotal_t    = document.getElementById('subtotal' + ref).textContent,

        price_v       = sign * parseFloat( price_t.substring(2)),
        subtotal      = parseFloat(subtotal_t) + price_v
    ;

    if (subtotal >= 0)
    {
        document.getElementById('subtotal' + ref).innerHTML = subtotal.toFixed(2);

        total += price_v;  //totality

        document.getElementById('totality').innerHTML = total.toFixed(2);
    }
}
    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;
    }
  <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="add(-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="add(-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="add(-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="add(-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="add(-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="add(-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="add(-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="add(-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="add(-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="add(-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="add(-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="add(-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="add(-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="add(-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="add(-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>

相关问题
最新问题