Create increment decrement plus minus buttons programmatically for HTML input type number in JavaScript

Javascript Web Development Object Oriented Programming

We will be creating two buttons, one for Increment and another Decrement −

On clicking Increment (+), user will be able to increment the number in input type number
On clicking Decrement (-), user will be able to decrement the number in input type number

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<input id=demoInput type=number min=100 max=110>
<button onclick="increment()">+</button>
<button onclick="decrement()">-</button>
<script>
   function increment() {
      document.getElementById('demoInput').stepUp();
   }
   function decrement() {
      document.getElementById('demoInput').stepDown();
   }
</script>
</body>
</html>

To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.

Output

This will produce the following output −

If you click the button increment (+) then it will add 1. On clicking decrement(-), 1 will get subtracted.

Here, I am going to use + button.

This will produce the following output −

AmitDiwan

Updated on: 12-Sep-2020

14K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started