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

<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.

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.

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.

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.

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.

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

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

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.

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

<h1 class="counter-display">(..)</h1>
<button class="counter-minus">-</button>
<button class="counter-plus">+</button>

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;
};