Как создать минус и плюс для обновления поля?

Question

Я пытаюсь создать страницу товаров с форумом, которая показывает цену товара, название товара, а также количество с кнопками для добавления или вычитания из поля количества.

Я понятия не имею, с чего начать, я подумал, что мне нужно разобраться с различными типами кнопок и типов ввода, но, похоже, ни у одного из них нет того, что мне нужно.

Мне было интересно, может ли кто-нибудь указать мне правильное направление, чтобы я мог понять, как эти кнопки меняют поле количества и как я могу сделать кнопку плюс и минус, которая появляется рядом с количеством.

Вот изображение того, что я имею в виду:

Answer 1

Используйте JavaScript для увеличения и уменьшения значения ввода:

const minusButton = document.getElementById('minus');
const plusButton = document.getElementById('plus');
const inputField = document.getElementById('input');

minusButton.addEventListener('click', event => {
  event.preventDefault();
  const currentValue = Number(inputField.value) || 0;
  inputField.value = currentValue - 1;
});

plusButton.addEventListener('click', event => {
  event.preventDefault();
  const currentValue = Number(inputField.value) || 0;
  inputField.value = currentValue + 1;
});

<button id="minus">−</button>
<input type="number" value="0" id="input"/>
<button id="plus">+</button>

Вот что происходит в коде JS. Сначала он получает ссылки на элементы HTML с помощью атрибута id HTML и функции document.getElementById JS. Затем он добавляет функции, которые выполняются при нажатии одной из кнопок. Внутри функций действие браузера кнопки по умолчанию (отправка формы) отменяется, вводимое значение считывается, увеличивается / уменьшается и возвращается на вход.