如何創建一個減號和加號按鈕來更新字段？

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元素的引用。 然后，它添加了單擊按鈕之一時執行的功能。 在函數內部，取消了默認的按鈕瀏覽器操作（提交表單），讀取，增大/減小了輸入值並返回到輸入。