Increase the value of a counter when a button is clicked in javascript

In this article, we will discuss how to build an increment and decrement counter on button click. If you are considering only implementing increment functionality, then code for decrement can be ignored.

We will create a counter with the following functionalities:

1. Initialize count to 0 on page load
2. Increment count by 1 on button click
3. Decrement count by 1 on button click

1. Create

for all the HTML elements

First, we need to HTML div tag for the following elements:

1. Increment Button: HTML container for increment button with id “increment-count.
2. Total count: HTML container where total count text is displayed.
3. Decrement Button: HTML container for decrement button with id “decrement-count.

2. Adding HTML Image Buttons

Next, we will add two buttons for both increment and decrement as follows:

1. Image button with id as “up-arrow” and up_arrow.png image url as source.
2. Image button with id as “down-arrow” and up_arrow.png image url as source.

3. Initialize count to 0 on page load

The count needs to be displayed as 0 when the page is first loaded, this is accomplished by the following steps:

1. Access the HTML container with id “total-count” using DOM selectors.
2. Declare and initialize JS variable count with 0.
3. Assign count variable value to previously selected DOM element innerHTML.

// Select total count
const totalCount = document.getElementById["total-count"];

// Variable to track count
var count = 0;

// Display initial count value
totalCount.innerHTML = count;

4. JS function for Increment functionality

The JS function to handle count increment using the following steps:

1. Increment count variable value by 1.
2. Assign count variable value to totalCount DOM element.

// Function to increment count
const handleIncrement = [] => {
  count++;
  totalCount.innerHTML = count;
};

5. JS function for Decrement functionality

The JS function to handle count decrement using the following steps:

1. Decrement count variable value by 1.
2. Assign count variable value to totalCount DOM element.

// Function to decrement count
const handleDecrement = [] => {
  count--;
  totalCount.innerHTML = count;
};

6. Add “click” event to buttons

Finally, we need to allow users to trigger JavaScript functionality, which is implemented in the following steps:

1. Access HTML Buttons from JavaScript using DOM selectors
2. Add “click” event to both increment and decrement image buttons.

// Select increment and decrement buttons
const incrementCount = document.getElementById["increment-count"];
const decrementCount = document.getElementById["decrement-count"];

// Add click event to buttons
incrementCount.addEventListener["click", handleIncrement];
decrementCount.addEventListener["click", handleDecrement];

Check code for style.css below for CSS code for alignment and styles.

Final Solution Code

index.html

    Increment Decrement Counter
    
    



    

        

          
        
        

        
        

          
        
    

main.js

// Select increment and decrement buttons
const incrementCount = document.getElementById["increment-count"];
const decrementCount = document.getElementById["decrement-count"];

// Select total count
const totalCount = document.getElementById["total-count"];

// Variable to track count
var count = 0;

// Display initial count value
totalCount.innerHTML = count;

// Function to increment count
const handleIncrement = [] => {
  count++;
  totalCount.innerHTML = count;
};

// Function to decrement count
const handleDecrement = [] => {
  count--;
  totalCount.innerHTML = count;
};

// Add click event to buttons
incrementCount.addEventListener["click", handleIncrement];
decrementCount.addEventListener["click", handleDecrement];

styles.css

#up-arrow,#down-arrow{
  width: 100px;
  height: 100px;
}
#total-count{
  font-weight: 900;
  font-size: 70px;
}
.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

What can be used to increment the value of count by 1 in the button click event handler?

How can I increment the value of a variable in JavaScript?

What is the code if you want to increment the count button increment?

How do you count title events?