Simple JavaScript Counter

In this JavaScript tutorial we will create a simple counter with few buttons. On clicking the buttons, the value of counter will increase or decrease.

Create Counter with Few Buttons

Below code will create a region where the counter value will be displayed. And 4 buttons that will call a JavaScript function on click. On clicking these buttons the value of counter will increase or decrease.
We will also create a reset button.

1
2
3
4
5
6

<h3>Counter Value: <span id="counter-value">0</span></h3>
<button type="button" onclick="counterFunction(1)">Increase By one</button> <button type="button" onclick="counterFunction(-1)">Decrease By one</button>
<br /><br />
<button type="button" onclick="counterFunction(5)">Increase By Five</button> <button type="button" onclick="counterFunction(-5)">Decrease By Five</button>
<br /><br />
<button type="button" onclick="counterResetFunction()">Reset Counter</button>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12

let counter = 0;
const conterVal = document.querySelector("#counter-value");
// Increment Decrement function
function counterFunction(x) {
counter += x;
conterVal.innerHTML = counter;
}
// counter reset function
function counterResetFunction() {
counter = 0;
conterVal.innerHTML = counter;
}

Demo

Demo – Simple JavaScript Counter

Create Counter with Few Buttons

JavaScript

Demo

Related Posts

Leave a Reply Cancel reply