Question

我需要一些帮助来获取第3列中所有价格值的总和，w / c由一个按钮添加，这是我的代码：

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);
  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);
  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);
  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);
  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">
  <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></td>
  </tr>
</table>

这里的事情是当我输入数量并单击按钮进入表格时，但我无法获得所有价格的总和。我需要正确的功能才能获得所需的输出。

Answer 1

首先，最好让示例在“ Codepen”或jsFiddle这样的网站上运行，这样人们才能看到您在说什么。

您可以做的一件事是，将价格添加到此处的列表中：cel3.innerHTML = "PHP"+price1*i;

也有一个名为“ total”之类的全局变量，每次将商品添加到列表中时，还要将价格添加到“ total”中（在添加字符串“ PHP”之前），然后将total分配为innerText <td><b>Total:</b></td>行中。

希望很清楚，否则请问一下，我会尽力解释更多！

Answer 2

您的代码的主要问题是输入值是一个字符串。所以你需要写cel3.innerHTML = "PHP"+(price*parseInt(qty.value))

接下来是我的代码。我尽力减少了您的代码，因为它非常冗长。我希望你不会介意。

let items = Array.from(document.querySelectorAll(".item_wrap"));
let table = document.getElementsByTagName('table')[0];

items.map((item) =>{
  let qty = item.querySelector(".qty");
  let price = item.querySelector(".price").innerHTML;
  let name = item.querySelector(".name").innerHTML;
  let plus = item.querySelector(".plus");
  let minus = item.querySelector(".minus");
  let add2cart = item.querySelector(".add2cart");
  
  plus.addEventListener("click", ()=>upClick(qty));
  minus.addEventListener("click", ()=>decreClick(qty));
  add2cart.addEventListener("click", ()=>add(name,price,qty));
})




function upClick(qty) {
        let i = qty.value;
        i++
        qty.value = i;
    }

    function decreClick(qty){
        let i = qty.value;  
        if(i == 0)return;
        i--;
        qty.value = i; 
    }


function add(name,price,qty){
if(qty.value > 0){  
let newRow = table.insertRow(1);
let cel1 = newRow.insertCell(0);
let cel2 = newRow.insertCell(1);
let cel3 = newRow.insertCell(2);
cel1.innerHTML = name;
cel2.innerHTML = qty.value;
cel3.innerHTML = "PHP"+(price*parseInt(qty.value));
}
}

input{
    width: 40px;
    height: 25px;
    text-align: center;
}

table{margin-top:5em;}

<article class="item_wrap">
<p class="name">Apple</p>
<p>PHP<s> 24 </s> PHP <span class="price">14</span></p>
<button type="button" class="minus" >-</button>
<input type="text" name="quantity" value="0" class="qty" />
<button type="button" class="plus" >+</button>
<br><br>
<button type="button" class="add2cart" >Add to cart</button>
</article>

<article class="item_wrap">
<p class="name">Boy</p>
<p>PHP<s> 34 </s> PHP <span class="price">24</span></p>
<button type="button" class="minus" >-</button>
<input type="text" name="quantity" value="0" class="qty" />
<button type="button" class="plus" >+</button>
<br><br>
<button type="button" class="add2cart" >Add to cart</button>
</article>



<table style="width:50%" border="1">
  <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></td>
  </tr>
</table>

更新：获取购物车总计：

let items = Array.from(document.querySelectorAll(".item_wrap"));
let table = document.getElementsByTagName('table')[0];
let prices = [];



items.map((item) =>{
  let qty = item.querySelector(".qty");
  let price = item.querySelector(".price").innerHTML;
  let name = item.querySelector(".name").innerHTML;
  let plus = item.querySelector(".plus");
  let minus = item.querySelector(".minus");
  let add2cart = item.querySelector(".add2cart");
  
  plus.addEventListener("click", ()=>upClick(qty));
  minus.addEventListener("click", ()=>decreClick(qty));
  add2cart.addEventListener("click", ()=>add(name,price,qty));
})




function upClick(qty) {
        let i = qty.value;
        i++
        qty.value = i;
    }

    function decreClick(qty){
        let i = qty.value;  
        if(i == 0)return;
        i--;
        qty.value = i; 
    }




function add(name,price,qty){
if(qty.value > 0){  
let newRow = table.insertRow(1);
let cel1 = newRow.insertCell(0);
let cel2 = newRow.insertCell(1);
let cel3 = newRow.insertCell(2);
cel1.innerHTML = name;
cel2.innerHTML = qty.value;
let _price = price*parseInt(qty.value);
cel3.innerHTML = "PHP"+_price;
  
prices.push(_price);
}
  sum();
}


function sum(){
  let totalAmount = 0;
  prices.map((p) =>{
    totalAmount += p;
  });
  theTotal.innerHTML = totalAmount;
}

input{
    width: 40px;
    height: 25px;
    text-align: center;
}

table{margin-top:5em;}

<article class="item_wrap">
<p class="name">Apple</p>
<p>PHP<s> 24 </s> PHP <span class="price">14</span></p>
<button type="button" class="minus" >-</button>
<input type="text" name="quantity" value="0" class="qty" />
<button type="button" class="plus" >+</button>
<br><br>
<button type="button" class="add2cart" >Add to cart</button>
</article>

<article class="item_wrap">
<p class="name">Boy</p>
<p>PHP<s> 34 </s> PHP <span class="price">24</span></p>
<button type="button" class="minus" >-</button>
<input type="text" name="quantity" value="0" class="qty" />
<button type="button" class="plus" >+</button>
<br><br>
<button type="button" class="add2cart" >Add to cart</button>
</article>



<table style="width:50%" border="1">
  <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="theTotal">0</td>
  </tr>
</table>

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

2 个答案: