Как сделать добавление нескольких элементов в корзину на кастомном input?

Question

Егор Довыденко @Doktorjd

Как сделать добавление нескольких элементов в корзину на кастомном input?

Здравствуйте. Не понимаю в чём причина.
Есть числовой input для выбора количества единиц товара для добавления в корзину. Пример на странице товара: ТУТ
Сделал кастомные кнопки + и - единиц.
Стандартные скрыл путём css:

.infocard__btn .quantity input[type=number]::-webkit-inner-spin-button,
.infocard__btn .quantity input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}
.infocard__btn .quantity input[type=number]{
  -moz-appearance: textfield;
}

Пока закомментил этот код, чтобы Вы понимали смысл проблемы.
При нажатии на + или - значение input меняется, как и при работе со стандартными стрелками:
10djgs2

Но! При добавлении в корзину учитываются только значения, добавленные стрелками. Если же вводить количество посредствам + или -, в корзину добавляется только 1 единица товара. Как настроить нормальное добавление через + и -?

Вопрос задан более трёх лет назад
400 просмотров

2 комментария

Подписаться 1 Средний 2 комментария

Стефан @MEDIOFF

Скиньте js работы с кнопками

Написано более трёх лет назад

Егор Довыденко @Doktorjd Автор вопроса

MEDIOFF,

<button class="number-minus" type="button" onclick="this.nextElementSibling.stepDown(); this.nextElementSibling.onchange();">-</button> 
<input type="number" class="input input--quantity inputQuantity" value="1" min="1" max="999">
<button class="number-plus" type="button" onclick="this.previousElementSibling.stepUp(); this.previousElementSibling.onchange();">+</button>

Написано более трёх лет назад

MEDIOFF,

<button class="number-minus" type="button" onclick="this.nextElementSibling.stepDown(); this.nextElementSibling.onchange();">-</button> <input type="number" class="input input--quantity inputQuantity" value="1" min="1" max="999"> <button class="number-plus" type="button" onclick="this.previousElementSibling.stepUp(); this.previousElementSibling.onchange();">+</button>

Answer 1 · 2021-03-05 13:03:29

Во первых,прочитай что делает функция stepUp() и stepDown(), во вторых - this.previousElementSibling.onchange() - не функция, и консоль вам об этом кричит, в третих - напиши нормальный код, что то типо такого:

const inp = document.querySelector("input");
const buttons = document.querySelectorAll("button");

inp.addEventListener("change", () => {
  console.log(inp.value);
});

buttons.forEach((btn, i) => {
  if (i === 0) {
    btn.addEventListener("click", () => {
      inp.value = Number(inp.value) - 1;
    });
  } else {
    btn.addEventListener("click", () => {
      inp.value = Number(inp.value) + 1;
    });
  }
});

Как сделать добавление нескольких элементов в корзину на кастомном input?

Войдите на сайт