In this article, you'll learn how to increment and decrement a counter in JavaScript with this step-by-step guide. This tutorial covers everything you need to know, from the basics of JavaScript to creating a working counter.
This guide includes step-by-step instructions, code examples, and screenshots. It's perfect for web developers of all levels who want to learn how to create a counter.
This counter have two buttons (one to increase counter, second to decrease the counter, that increases and decrease by 1). This is not the automatic counter. When user click on the + button counter increase and if user clicks on - button counter decreases. You can see below image how our counter looks like.
You can use this type of counter at e-commerce website, when user added the product to cart. And In cart user see this counter to increase the number of quantities of product (Means if user added watch or electronic device or etc to cart then if it wants more quantity of same product, then you can use this counter to know the quantity of product user want).
Video Tutorial of Increment and Decrement Counter Using JavaScript:
Increment and Decrement Counter Using javascript.
So, this counter contains two button and one input field. Buttons to increase and decrease the counter value and input field is to show the counter value.
So, let's start making increment and decrement counter using JavaScript.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder with name index.html and index.css.
Create a simple design for counter.
So first we'll create an desing for increment and decrement counter using HTML & CSS. We'll create two button (to increment and decrement) and one input field (to show value).
Also read: Detect button hold using JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box">
<button type="button" class="decrease">-</button>
<input type="text" value="0" class="counter-value" readonly>
<button type="button" class="increase">+</button>
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background: linear-gradient(45deg , #2b1576 , #000);
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
padding: 20px 30px;
background-color: #fff;
display: flex;
align-items: center;
}
.box .increase , .box .decrease{
width: 80px;
height: 80px;
background-color: #000;
color: #fff;
font-size: 50px;
padding: 10px;
cursor: pointer;
}
.box input{
max-width: 200px;
width: auto;
font-size: 50px;
margin: 0px 20px;
border: 2px solid #000;
}
Output:
Here's the increment and decrement counter design is ready Now let's add functionality to increase and decrease the value of input field according to click of buttons using JavaScript.
Add functionality to Increment and Decrement counter using JavaScript.
So, first of all we'll defined the variables for buttons and input field and also created another variable with name v which have value set to 0 initially.
This v variable value later added to input field value after increment (v++) or decrement (v--) by 1.
JavaScript
let decrease = document.querySelector('.decrease');
let counter_value = document.querySelector('.counter-value');
let increase = document.querySelector('.increase');
let v = 0;
Increment the counter.
Now let's make first to increment the counter when user click on button with class name increase.
We'll run a function on click of button (class="increase"). In that function we'll check for the current v variable value. that is greater than or equal to 10 or not.
If greater than or equal to 10 then we'll show message for limit reached. Else we'll increment the variable v value by 1 and add that v variable value to input field value (class="counter-value").
Every time user clicks on increment button (class="increase") and if v variable value is not greater than or equal to 10 then, v variable value increment by 1 and that value updated in input field value (class="counter-value").
JavaScript
increase.onclick = function(){
if(v >= 10){
console.log('Reached maximum quantity');
}else{
v++;
counter_value.value = v;
}
}
Decrement the counter.
Now let's make decrement the counter when user click on button with class name decrease.
We'll run a function on click of button (class="decrease"). In that function we'll check for the current v variable value. that its 0 or not. If 0 then we remain the v variable value 0. else we'll decrement the variable v value by 1 and add that v variable value to input field value (class="counter-value").
JavaScript
decrease.onclick = function(){
if(v == 0){
v = 0;
}else{
v--;
counter_value.value = v;
}
}So that's how you can create increment and decrement using JavaScript.
You may like:
- How to create counter that increment and decrement the counter until button released.
- How to create an counter countdown with fade out animation using JavaScript.
- How to create a live word counter using JavaScript.
- How to add and show character counter and character limit in textarea using JavaScript.
- How to create character counter with and without space using JavaScript.
- How to create tags input box with tag counter and tag input limit using JavaScript.
- How to create a pop up box displaying count down timer when appears on screen.
Final code :
So that's it increments and decrement counter is ready using HTML, CSS and JavaScript. You can see demo in the above you tube video. If you have any question or suggestion feel free to write them in the comment section.
Share your thoughts.