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 −