计算购物车总和

Question

I want to calculate the total(sum) of all the purchases using the "+","-" to add and remove products from the shopping cart.It should display the amount on the left top corner in front of "total:".In front of each product, the total purchase of the single purchase is displayed. 我想使用“ +”，“-”从购物车中添加和删除产品来计算所有购买的总计（总和）。应在“总计：”前面的左上角显示金额。在每个产品的前面，显示一次购买的总购买量。

Here a descriptive image 这是描述性图片

Here the html code: 这里的HTML代码：

<body>
    <div class="shopping-cart">
      <!-- Title -->
      <div class="title">
        Shopping Bag total : 
      </div>

      <!-- Product #1 -->
      <div class="item">
        <div class="buttons">
          <span class="delete-btn"></span>
          <span class="like-btn"></span>
        </div>

        <div class="image">
          <img src="item-1.png" alt="" />
        </div>

        <div class="description">
          <span>Common Projects</span>
          <span>Bball High</span>
          <span>White</span>
        </div>

        <div class="quantity">
          <button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
          <input type="text" value="0" class="input-btn" />
          <button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>

        </div>

        <div class="total-price" id="549"><input type="number" value="0" class="result-btn" /></div>

      </div>

      <!-- Product #2 -->
      <div class="item">
        <div class="buttons">
          <span class="delete-btn"></span>
          <span class="like-btn"></span>
        </div>

        <div class="image">
          <img src="item-2.png" alt=""/>
        </div>

        <div class="description">
          <span>Maison Margiela</span>
          <span>Future Sneakers</span>
          <span>White</span>
        </div>

        <div class="quantity">
          <button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
          <input type="text" value="0" class="input-btn" />
          <button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
        </div>

        <div class="total-price" id="270"><input type="number" value="0" class="result-btn" /></div>
      </div>

      <!-- Product #3 -->
      <div class="item">
        <div class="buttons">
          <span class="delete-btn"></span>
          <span class="like-btn"></span>
        </div>

        <div class="image">
          <img src="item-3.png" alt="" />
        </div>

        <div class="description">
          <span>Our Legacy</span>
          <span>Brushed Scarf</span>
          <span>Brown</span>
        </div>

        <div class="quantity">
          <button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
          <input type="text" value="0" class="input-btn" />
          <button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
        </div>

        <div class="total-price" id="349"><input type="number" value="0" class="result-btn" /></div>
      </div>
    </div>
</body>

Here the JS code: 这里的JS代码：

const items = document.querySelectorAll('.item');

    items.forEach(function(item) {
      const minusButton = item.querySelector('.minus-btn');
      const plusButton = item.querySelector('.plus-btn');
      const inputField = item.querySelector('.input-btn');
      const resultField = item.querySelector('.result-btn');

      minusButton.addEventListener('click', function minusProduct() {
        const currentValue = Number(inputField.value);
        if (currentValue > 0) {
          inputField.value = currentValue - 1;
          var x = item.querySelector('.total-price').id;
          resultField =  item.querySelector('.result-btn').value = x* inputField.value;
        } else inputField.value = 0
      });

      plusButton.addEventListener('click', function plusProduct() {
        const currentValue = Number(inputField.value);
        if (currentValue < 100) {
        inputField.value = currentValue + 1;
       var x = item.querySelector('.total-price').id;
       resultField = item.querySelector('.result-btn').value = x* inputField.value;
       document.querySelector('.title').innerHTML = item.querySelector('.result-btn')[0].value
+item.querySelector('.result-btn')[1].value + item.querySelector('.result-btn')[2].value
      } else inputField.value = 100
      });

    });

Answer 1

There are two thing that you need to do. 您需要做两件事。 1. You need to convert value of total price and total price to number. 1.您需要将总价和总价的值转换为数字。 2. Set the innneHTML of dev other wise you will get the error. 2.否则将dev的innneHTML设置为您会收到错误。 eg ( 例如（

Uncaught TypeError: Assignment to constant variable. at HTMLButtonElement.minusProduct Uncaught TypeError: Assignment to constant variable. at HTMLButtonElement.minusProduct ) Uncaught TypeError: Assignment to constant variable. at HTMLButtonElement.minusProduct ）

So, in your JS 因此，在您的JS中

resultField.innerHTML = item.querySelector('.result-btn').value = Number(x) * Number(inputField.value);

计算购物车总和

问题描述

1 个解决方案

解决方案1
0 2018-12-31 00:04:44

计算购物车总和

问题描述

1 个解决方案

解决方案1 0 2018-12-31 00:04:44

解决方案1
0 2018-12-31 00:04:44