Making a simple counter in javascript & HTML
Tags: javascript, counter, beginners, tutorial
Published: 2019-09-03 09:07:49

---
title: Making a simple counter in javascript & HTML
published: true
description: Making a simple counter in javascript & HTML
tags: Javascript, Counter, Beginner, Tutorial
---

# Making a simple counter in javascript & HTML
This is my first post on here! In case of any confusion feel free to write me a comment and I'll try to update my post to be more clear!

## Step 1 - HTML Setup
Starting with some simple HTML, an h1 for the display of the current count and Buttons for adding and subtracting

```HTML
<h1 class="counter-display">(..)</h1>
<button class="counter-minus">-</button>
<button class="counter-plus">+</button>
```
You can another tag for the counter display if you feel like. I'm just using a h1 for this example.
___ 

## Step 2 - Adding Javascript
### Selecting our DOM Elements
Firstly we'll start by select our various elements using ` document.queryselector` and putting the result into some variables.
 ```javascript
let counterDisplayElem = document.querySelector('.counter-display');
let counterMinusElem = document.querySelector('.counter-minus');
let counterPlusElem = document.querySelector('.counter-plus');
```
### Count Variable
Then we'll add a counter variable, so that we have a something to reference. I've decided to call this `count`. 
```javascript
let count = 0;
```
This will be the variable that we'll be adding or subtracting from.

### Adding Event listeners

We'll need to add eventlisteners to our elements so that we can dictate what happens when we click on our add or subtract buttons.

```javascript
counterPlusElem.addEventListener("click",()=>{

});
```
Here we have added an eventlistener to our counterPlusElem that listens after a click and then executes an anonymous function. This would be that same for our counterMinusElem `counterMinusElem.addEventListener...`

### Functionality of our eventlisteners
Now, lets add the core functionality of adding to our counter.
```javascript
counterPlusElem.addEventListener("click",()=>{
    counter++;
});
```
Here we're taking our counter variable and adding 1 to it. You can achieve the same result by using `counter = counter + 1`

For our minus eventlistener we can use `counter--` which is the same as `counter++` but with subtracting instead of adding.

### Updaing our display
To update our display we have 2 posibilities. We can either add our code directly to the eventlisteners like so.
```javascript
counterPlusElem.addEventListener("click",()=>{
    counter++;
    counterDisplayElem.innerHTML = count;
});
```
Selecting our counterdisplay element and setting it's innerHTML to be our count variable we just added 1 to.

But since both our plus and minus buttons should update our display we should make it into a function to avoid redundancy. Like so

```javascript
function updateDisplay(){
    counterDisplayElem.innerHTML = count;
};
```
I've decided to call my function updateDisplay as it's a function that updates our display

Now we're able to call our function updateDisplay. So our eventlistener would now look like this

```javascript
counterPlusElem.addEventListener("click",()=>{
    counter++;
    updateDisplay();
});
```
By having our new function we can call it at the start of the document. To have it updated when we load up the page. Right now it would just show `(..)` until we press one of our two buttons.

We should call it after we've defined our variables and elements. Like so.

 ```javascript
let counterDisplayElem = document.querySelector('.counter-display');
let counterMinusElem = document.querySelector('.counter-minus');
let counterPlusElem = document.querySelector('.counter-plus');

let count = 0;

updateDisplay();
```
## Final code
Our final code should look like this if everything has been done correctly.

### HTML
```html
<h1 class="counter-display">(..)</h1>
<button class="counter-minus">-</button>
<button class="counter-plus">+</button>
```
### Javascript
```javascript
let counterDisplayElem = document.querySelector('.counter-display');
let counterMinusElem = document.querySelector('.counter-minus');
let counterPlusElem = document.querySelector('.counter-plus');

let count = 0;

updateDisplay();

counterPlusElem.addEventListener("click",()=>{
    count++;
    updateDisplay();
}) ;

counterMinusElem.addEventListener("click",()=>{
    count--;
    updateDisplay();
});

function updateDisplay(){
    counterDisplayElem.innerHTML = count;
};
```