Страница перезагружается, когда тип ввода = "число" изменяется кнопками

Question

Для упрощения у меня есть базовая c HTML структура, где внутри у меня есть один ввод числа и соответствующие кнопки добавления и вычитания. Каждый раз при нажатии одной из кнопок страница автоматически перезагружается. Как я могу предотвратить это?

Это мой код:

<form>
  ...
  <button   onclick="this.parentNode.querySelector('input[type=number]').stepDown()" class="icon-number ver"></button>
<input class="quantity" min="0" max="99" name="quantity" value="1" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus icon-number ver"></button>
  
  <button class="btn-form btn-add-cart" type="submit">ADD TO CART</button>
  
</form>

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

Answer 1

Убедитесь, что ваши функции возвращают false

<form>
  ...
  <button   onclick="this.parentNode.querySelector('input[type=number]').stepDown(); return false;" class="icon-number ver"></button>
<input class="quantity" min="0" max="99" name="quantity" value="1" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp(); return false;" class="plus icon-number ver"></button>
  
  <button class="btn-form btn-add-cart" type="submit">ADD TO CART</button>
  
</form>

Answer 2

Это может быть отправка формы после нажатия кнопки. Я попробовал ваш код на моей локальной машине и мог исправить его, используя тип атрибута, подобный этому.

<button type="button" onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus icon-number ver"></button>