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

JavascriptWeb DevelopmentObject 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

 Live Demo

<!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 −

raja
Published on 12-Sep-2020 11:08:21
Advertisements