Increment and Decrement Button in HTML

This code creates an Increment and Decrement Button in HTML. It allows you to increase or decrease a counter value displayed in an input field. The buttons and input field are styled using CSS to provide a user-friendly interface for adjusting the counter. This code is helpful for implementing simple numeric increment and decrement functionality on a web page.

You can use this code in various web applications, such as e-commerce sites, quantity selection forms, or interactive calculators. It provides an intuitive way for users to adjust numeric values easily.

How to Create Increment and Decrement Button in HTML

1. Begin by creating the HTML structure for your increment and decrement buttons. You can copy the following code into your HTML file:

<div class="input-group">
  <button id="decrement">-</button>
  <input type="number" id="input" value="0" readonly>
  <button id="increment">+</button>
</div>

2. To make your buttons stylish, add the following CSS code to your HTML file or create a separate CSS file. It styles the buttons, input field, and container.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: linear-gradient(
    225deg,
    rgba(242, 113, 33, 1) 0%,
    rgba(233, 64, 87, 1) 47%,
    rgba(138, 35, 135, 1) 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding: 0 1rem;
}

.input-group {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.3), 4px 7px 15px rgba(0, 0, 0, 0.2),
    9px 15px 25px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  max-width: 360px;
}

button,
input {
  outline: none;
  border: none;
  padding: 16px;
  font-size: 18px;
}

input {
  width: 100%;
  text-align: center;
}

button {
  cursor: pointer;
}
button:nth-last-child(1) {
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
}
button:nth-child(1) {
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
}

button:hover {
  background-color: #e6e6e6;
}
button:nth-last-child(1):active {
  box-shadow: inset -4px 5px 10px rgba(0, 0, 0, 0.5);
}
button:nth-child(1):active {
  box-shadow: inset 4px 5px 10px rgba(0, 0, 0, 0.5);
}

3. Now, let’s add the JavaScript functionality to your HTML. Place the following JavaScript code at the end of your HTML file or in a separate JavaScript file:

let counter = 0;

function increment() {
  counter++;
}

function decrement() {
  counter--;
}

function get() {
  return counter;
}

const inc = document.getElementById("increment");
const input = document.getElementById("input");
const dec = document.getElementById("decrement");

inc.addEventListener("click", () => {
  increment();
  input.value = get();
});

dec.addEventListener("click", () => {
  if (input.value > 0) {
    decrement();
  }
  input.value = get();
});

This JavaScript code defines three functions for incrementing, decrementing, and retrieving the counter value. It also sets up event listeners to respond to button clicks.

That’s all! You’ve successfully created Increment and Decrement buttons in HTML using JavaScript. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.