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

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 元素的引用。然后它添加在单击其中一个按钮时执行的功能。在函数内部，默认按钮浏览器动作（提交表单）被取消，输入值被读取，增加/减少并放回输入。