javascript - How to create a minus and plus button to update a field? - Stack Overflow

admin管理员组

文章数量:1345469

I am trying to create a products page with a forum that shows the price of the item, the name of the item and also the quantity with buttons to add or subtract from the quantity field.

I have no idea where to begin, I thought I'd do some looking into different types of buttons and form input types but none of them seem to have what I need.

I was wondering if anyone can point me to the right direction so I can figure out how these buttons are changing the quantity field and how I can make a plus and minus button which appears next to the quantity.

Here is a picture of what I mean:

I am trying to create a products page with a forum that shows the price of the item, the name of the item and also the quantity with buttons to add or subtract from the quantity field.

I have no idea where to begin, I thought I'd do some looking into different types of buttons and form input types but none of them seem to have what I need.

I was wondering if anyone can point me to the right direction so I can figure out how these buttons are changing the quantity field and how I can make a plus and minus button which appears next to the quantity.

Here is a picture of what I mean:

• javascript
• html
• forms

Share Improve this question Follow edited Sep 1, 2018 at 11:48 Al.G. 4,42766 gold badges3434 silver badges6262 bronze badges asked Sep 1, 2018 at 5:33 Huseyin YesilerHuseyin Yesiler 8511 gold badge22 silver badges1212 bronze badges 1

• Take a look at the answer to this question it offers a very nice solution to this problem. – Nick Commented Sep 1, 2018 at 6:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Use JavaScript to increase and decrease the input value:

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>

Here what happens in the JS code. First it gets references to the HTML elements using the id HTML attribute and the document.getElementById JS function. Then it adds functions which are executed when one of the buttons is clicked. Inside the functions, the default button browser action (submitting the form) is cancelled, the input value is read, increased/decreased and put back to the input.

本文标签： javascriptHow to create a minus and plus button to update a fieldStack Overflow