时间戳

首页 > 解决方案 > 带按钮的加/减产品

javascript - 带按钮的加/减产品

问题描述

我编写了一个代码来模拟“购物车”，通过使用“+”“-”按钮添加/删除产品，代码工作正常但仅适用于一个产品的问题，我希望代码适用于所有产品.

这里的代码：

const minusButton = document.querySelector('.minus-btn');
const plusButton = document.querySelector('.plus-btn');
const inputField = document.querySelector('.input-btn');

minusButton.addEventListener('click', function minusProduct() {
  const currentValue = Number(inputField.value);
  if (currentValue > 0) {
    inputField.value = currentValue - 1;
  } else currentValue = 0
});

plusButton.addEventListener('click', function plusProduct() {
  const currentValue = Number(inputField.value);
  inputField.value = currentValue + 1;
});
<!-- Product #1 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button" id="plus"><img src="plus.svg" alt="" /></button>
  <input type="text" value="0" id="input" />
  <button class="minus-btn" type="button" name="button" id="minus"><img src="minus.svg" alt="" /></button>
</div>

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

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

标签： javascripthtmldom

解决方案

您需要为每个.quantity组执行您的代码所做的事情。

但是您的html中有几个错误

  • 您尝试访问.input-btn未应用于任何元素的
  • currentValue您在声明 a 后尝试设置为 0const何时应尝试将输入字段设置为 0
  • 您对无效的每个组id的按钮/输入使用相同的。.quantity

所以 

const quantities = document.querySelectorAll('.quantity');

[...quantities].forEach(function(quantity) {
  const minusButton = quantity.querySelector('.minus-btn');
  const plusButton = quantity.querySelector('.plus-btn');
  const inputField = quantity.querySelector('.input-btn');

  minusButton.addEventListener('click', function minusProduct() {
    const currentValue = Number(inputField.value);
    if (currentValue > 0) {
      inputField.value = currentValue - 1;
    } else inputField.value = 0
  });

  plusButton.addEventListener('click', function plusProduct() {
    const currentValue = Number(inputField.value);
    inputField.value = currentValue + 1;
  });

});
<!-- Product #1 -->
<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>

<!-- Product #2 -->
<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>

<!-- Product #3 -->
<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>

推荐阅读