如何获得相加单元格的总和

Question

我需要一些帮助来获取单元格附加值的总和，这是我的代码：

var i = 0;
var ii = 0;
var iii = 0;
var iiii = 0;

function buttonClick1() {
  i++;
  document.getElementById("qty1").value = i;
}

function decreClick1(){
  if(i <= 0)
  return;
  i--;
  document.getElementById("qty1").value = i;
}

function buttonClick2() {
  ii++;
  document.getElementById("qty2").value = ii;
}

function decreClick2(){
  if(ii <= 0)
  return;
  ii--;
  document.getElementById("qty2").value = ii;
}

function buttonClick3() {
  iii++;
  document.getElementById("qty3").value = iii;
}

function decreClick3(){
  if(iii <= 0)
  return;
  iii--;
  document.getElementById("qty3").value = iii;
}

function buttonClick4() {
  iiii++;
  document.getElementById("qty4").value = iiii;
}

function decreClick4(){
  if(iiii <= 0)
    return;
  iiii--;
  document.getElementById("qty4").value = iiii;
}

var price1 = 14;
var price2 = 24;
var price3 = 34;
var price4 = 44;
var item1 = "apple";
var item2 = "boy";
var item3 = "cat";
var item4 = "dog";

function a(){
  var table = document.getElementsByTagName('table')[0];
  var newRow = table.insertRow(1);
  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  cel3.id = 'celId1'
  cel1.innerHTML = item1;
  cel2.innerHTML = document.getElementById("qty1").value;
  cel3.innerHTML = "PHP"+price1*i;
}

function b(){
  var table = document.getElementsByTagName('table')[0];
  var newRow = table.insertRow(1);
  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  cel3.id = 'celId2'
  cel1.innerHTML = item2;
  cel2.innerHTML = document.getElementById("qty2").value;
  cel3.innerHTML = "PHP"+price2*ii;
}

function c(){
  var table = document.getElementsByTagName('table')[0];
  var newRow = table.insertRow(1);
  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  cel3.id = 'celId3'
  cel1.innerHTML = item3;
  cel2.innerHTML = document.getElementById("qty3").value;
  cel3.innerHTML = "PHP"+price3*iii;
}

function d(){
  var table = document.getElementsByTagName('table')[0];
  var newRow = table.insertRow(1);
  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  cel3.id = 'celId4'
  cel1.innerHTML = item4;
  cel2.innerHTML = document.getElementById("qty4").value;
  cel3.innerHTML = "PHP"+price4*iiii;
}

input{
  width: 40px;
  height: 25px;
  text-align: center;
}

<p>Apple</p>
<p>PHP<s> 24 </s> PHP 14</p>
<button type="button" onclick="decreClick1()">-</button>
<input type="text" name="quantity" value="0" id="qty1" />
<button type="button" onclick="buttonClick1()">+</button>
<br><br>
<button type="button" onclick="a()">Add to cart</button>

<p>Boy</p>
<p>PHP<s> 34 </s> PHP 24</p>
<button type="button" onclick="decreClick2()">-</button>
<input type="text" name="quantity" value="0" id="qty2" />
<button type="button" onclick="buttonClick2()">+</button>
<br><br>
<button type="button" onclick="b()">Add to cart</button>

<p>Cat</p>
<p>PHP<s> 44 </s> PHP 34</p>
<button type="button" onclick="decreClick3()">-</button>
<input type="text" name="quantity" value="0" id="qty3" />
<button type="button" onclick="buttonClick3()">+</button>
<br><br>
<button type="button" onclick="c()">Add to cart</button>


<p>Dog</p>
<p>PHP<s> 54 </s> PHP 44</p>
<button type="button" onclick="decreClick4()">-</button>
<input type="text" name="quantity" value="0" id="qty4" />
<button type="button" onclick="buttonClick4()">+</button>
<br><br>
<button type="button" onclick="d()">Add to cart</button>


<table style="width:50%" border="1" id="table1">
  <caption><b>Cart List:<b></caption>
  <tr>
    <th>Item</th>
    <th>Quantity</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><b>Total:</b></td>
    <td id="total"></td>
  </tr>
</table>

这里的事情是，当我放置一个数量并单击按钮时，它会转到表，但是我无法获得我使用的tot = document.getElementById("total").innerHTML = celid1+celid2+celid3+celid4;

所添加的单元格的总和。

Answer 1

快速答案：

  const val = parseInt(document.getElementById("qty3").value, 10);
  const total = document.getElementById('total');

  if (total.innerHTML === '') {
    total.innerHTML = val;
  } else {
    total.innerHTML = parseInt(total.innerHTML, 10) + val;
  }

我应该说您的代码太大了。您应该使用函数，值数组和循环。

var i = 0;
var ii = 0;
var iii = 0;
var iiii = 0;

function buttonClick1() {
  i++;
  document.getElementById("qty1").value = i;
}

function decreClick1() {
  if (i <= 0)
    return;
  i--;
  document.getElementById("qty1").value = i;
}

function buttonClick2() {
  ii++;
  document.getElementById("qty2").value = ii;
}

function decreClick2() {
  if (ii <= 0)
    return;
  ii--;
  document.getElementById("qty2").value = ii;
}

function buttonClick3() {
  iii++;
  document.getElementById("qty3").value = iii;
}

function decreClick3() {
  if (iii <= 0)
    return;
  iii--;
  document.getElementById("qty3").value = iii;
}

function buttonClick4() {
  iiii++;
  document.getElementById("qty4").value = iiii;
}

function decreClick4() {
  if (iiii <= 0)
    return;
  iiii--;
  document.getElementById("qty4").value = iiii;
}

var price1 = 14;
var price2 = 24;
var price3 = 34;
var price4 = 44;
var item1 = "apple";
var item2 = "boy";
var item3 = "cat";
var item4 = "dog";


function a() {
  var table = document.getElementsByTagName('table')[0];
  var newRow = table.insertRow(1);
  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  cel3.id = 'celId1'
  cel1.innerHTML = item1;
  cel2.innerHTML = document.getElementById("qty1").value;
  cel3.innerHTML = "PHP" + price1 * i;

  const val = parseInt(document.getElementById("qty1").value, 10);
  const total = document.getElementById('total');

  if (total.innerHTML === '') {
    total.innerHTML = val;
  } else {
    total.innerHTML = parseInt(total.innerHTML, 10) + val;
  }
}

function b() {
  var table = document.getElementsByTagName('table')[0];
  var newRow = table.insertRow(1);
  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  cel3.id = 'celId2'
  cel1.innerHTML = item2;
  cel2.innerHTML = document.getElementById("qty2").value;
  cel3.innerHTML = "PHP" + price2 * ii;

  const val = parseInt(document.getElementById("qty2").value, 10);
  const total = document.getElementById('total');

  if (total.innerHTML === '') {
    total.innerHTML = val;
  } else {
    total.innerHTML = parseInt(total.innerHTML, 10) + val;
  }
}

function c() {
  var table = document.getElementsByTagName('table')[0];
  var newRow = table.insertRow(1);
  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  cel3.id = 'celId3'
  cel1.innerHTML = item3;
  cel2.innerHTML = document.getElementById("qty3").value;
  cel3.innerHTML = "PHP" + price3 * iii;

  const val = parseInt(document.getElementById("qty3").value, 10);
  const total = document.getElementById('total');

  if (total.innerHTML === '') {
    total.innerHTML = val;
  } else {
    total.innerHTML = parseInt(total.innerHTML, 10) + val;
  }
}

function d() {
  var table = document.getElementsByTagName('table')[0];
  var newRow = table.insertRow(1);
  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  cel3.id = 'celId4'
  cel1.innerHTML = item4;
  cel2.innerHTML = document.getElementById("qty4").value;
  cel3.innerHTML = "PHP" + price4 * iiii;

  const val = parseInt(document.getElementById("qty4").value, 10);
  const total = document.getElementById('total');

  if (total.innerHTML === '') {
    total.innerHTML = val;
  } else {
    total.innerHTML = parseInt(total.innerHTML, 10) + val;
  }

}

input {
  width: 40px;
  height: 25px;
  text-align: center;
}

<html>

<body>
  <p>Apple</p>
  <p>PHP<s> 24 </s> PHP 14</p>
  <button type="button" onclick="decreClick1()">-</button>
  <input type="text" name="quantity" value="0" id="qty1" />
  <button type="button" onclick="buttonClick1()">+</button>
  <br><br>
  <button type="button" onclick="a()">Add to cart</button>

  <p>Boy</p>
  <p>PHP<s> 34 </s> PHP 24</p>
  <button type="button" onclick="decreClick2()">-</button>
  <input type="text" name="quantity" value="0" id="qty2" />
  <button type="button" onclick="buttonClick2()">+</button>
  <br><br>
  <button type="button" onclick="b()">Add to cart</button>

  <p>Cat</p>
  <p>PHP<s> 44 </s> PHP 34</p>
  <button type="button" onclick="decreClick3()">-</button>
  <input type="text" name="quantity" value="0" id="qty3" />
  <button type="button" onclick="buttonClick3()">+</button>
  <br><br>
  <button type="button" onclick="c()">Add to cart</button>


  <p>Dog</p>
  <p>PHP<s> 54 </s> PHP 44</p>
  <button type="button" onclick="decreClick4()">-</button>
  <input type="text" name="quantity" value="0" id="qty4" />
  <button type="button" onclick="buttonClick4()">+</button>
  <br><br>
  <button type="button" onclick="d()">Add to cart</button>


  <table style="width:50%" border="1" id="table1">
    <caption><b>Cart List:<b></caption>
  <tr>
    <th>Item</th>
    <th>Quantity</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><b>Total:</b></td>
      <td id="total"></td>
      </tr>
  </table>

</body>

</html>