Нажмите кнопку запуск события только один раз для функции приращения в JavaScript

#javascript #html #dom #events #onclick

Вопрос:

Первое if условие выполняется по желанию несколько раз, но второе и третье условия выполняются только один раз. если щелкнуть по fa-plus-square элементу, то число увеличивается только один раз, а минус-элемент уменьшается только один раз. Почему она не увеличивается дальше?

 let input = document.querySelector(".quantity-input");
document.addEventListener('click', function(e) {
  if (!e.target.classList.contains('quantity-input')) {
    input.value = 1;
  }
  if (e.target.classList.contains('fa-plus-square')) {
    input.value = parseInt(input.value)   1;
  }
  if (e.target.classList.contains('fa-minus-square')) {
    input.value = parseInt(input.value) - 1;
  }
});

 <p class="quantity">
  <span class="quantity-text">Quantity </span><i class="far fa-minus-square quantity-icon">-</i>
  <input type="number" value="1" class="quantity-input" />
  <i class="far fa-plus-square quantity-icon"> </i>
</p>

1. Привет, я не уверен, что понимаю, вы просите парня нажать на документ, и вы ищете список классов документа?

2. Если вы нажмете на .fa-plus-square этот элемент, он не будет содержать класс .quantity-input . Итак, первое, что делает ваш слушатель, — это устанавливает значение 1. Затем он увеличивает его на единицу.

3. @DafuQi e.target -это элемент, на который был нажат, а не элемент, к которому был добавлен прослушиватель событий. Это делегирование событий.

4. Он все еще помещает слушателя на всю свою страницу, чтобы проверять только то, что указано в теге «идентификатор: количество»? @Бармар

5. @DafuQi Да, это немного чересчур, но это работает.

Ответ №1:

Сначала вам нужно проверить наличие кнопок «плюс» и «минус» и использовать else if их, чтобы проверить, не нажимаете ли вы на поле ввода, только если ни одна из них не удалась.

В противном случае, когда вы нажимаете на кнопки «плюс» или «минус», !e.target.classList.contains('quantity-input') условие выполняется верно, поэтому перед добавлением или вычитанием оно возвращает значение 1.

 let input = document.querySelector(".quantity-input");
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('fa-plus-square')) {
    input.value = parseInt(input.value)   1;
  }
  else if (e.target.classList.contains('fa-minus-square')) {
    input.value = parseInt(input.value) - 1;
  }
  else if (!e.target.classList.contains('quantity-input')) {
    input.value = 1;
  }
});

 <p class="quantity">
  <span class="quantity-text">Quantity </span><i class="far fa-minus-square quantity-icon">-</i>
  <input type="number" value="1" class="quantity-input" />
  <i class="far fa-plus-square quantity-icon"> </i>
</p>

1. Также возможно — добавить .quantity-input кнопки / -, чтобы они были освобождены от функции сброса. Возможно, потребуется изменить селектор для ввода на input.quantity-input

2. Спасибо, это сработало. Мне просто нужно было перенести первое условие на последнее в моем коде 🙂