Question

我想使用“ +”，“-”来计算所有购买的总和，以从购物车中添加和删除产品。它应该在“总计”前面的左上角显示金额：”。在每个产品的前面，显示一次购买的总购买金额。

以下是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>

这是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

您需要做两件事。 1.您需要将总价和总价的值转换为数字。 2.否则将dev的innneHTML设置为您会收到错误。例如（

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

所以，在您的JS中

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

计算购物车总和

1 个答案: