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

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