如何创建一个减号和加号按钮来更新字段？

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代码中发生的事情。首先，它使用id HTML属性和document.getElementById JS函数获取对HTML元素的引用。然后，它添加了单击按钮之一时执行的功能。在函数内部，取消了默认的按钮浏览器操作（提交表单），读取了输入值，增加/减小了该值并将其返回给输入。