Objective

Create a simple counter program using JavaScript.

Difficulty

Easy

Description

A counter is a very elementary kind of a program. As the name suggests, it is literally used to perform counting (i.e. 0, 1, 2, 3 and so on).

Typically, a counter begins counting at 0 and comes equipped with three buttons: one to increment the count, one to decrement it, and one to reset it back to 0.

Shown below is an example of a counter:

A simple counter program.

In this exercise, you have to create a counter program similar to the one shown above.

Here are the basic rules to abide by:

  • The counter must begin at 0.
  • The increment button must increase the count it by 1.
  • The decrement button must decrease the count by 1.
  • The reset button must reset the count back to 0.
  • The decrement button must NOT decrement the count if it's at 0. In other words, negative counts shouldn't be there in the counter.

Note that this exercise isn't concerned with the design (i.e. the visual design) of the counter. You are only required to get the underlying logic right; the design can be whatever you like.

View Solution

New file

Inside the directory you created for this course on JavaScript, create a new folder called Exercise-49-A-Simple-Counter and put the .html solution files for this exercise within it.

Solution

First, let's create an element where the count of our counter program will actually be displayed.

We'll go with an <h1> element (due to its large font size) and give it the #displayed ID in order to be able to easily access it later on:

<h1 id="display">0</h1>

Since the counter begins at 0, we put 0 inside the element.

Since there is only going to be one <h1> element on the page, we could've also considered not using an id at all. However, the benefit of using one is that we could, later on, swap the <h1> element with another element, but still get the counter to work correctly since the element would always be accessed based on its id value.

So far, so good.

Next, let's create all the three buttons powering the functionality of our program:

<h1 id="display">0</h1>

<button id="increment">+</button>
<button id="decrement">-</button>
<button id="reset">Reset</button>

Once again, we use ids on all the three buttons just to be able to easily access them later on in the JavaScript.

With the markup done, now it's time to dive right into the logic of our counter.

Starting with the very first thing, a global variable count, initialized to 0, could be used to represent the counter's current count. Then handler of the increment button could, likewise, just increment count and then display the new value inside the <h1> element.

A similar reasoning could be applied to the decrement and reset buttons.

Overall, this sounds absolutely perfect. So, let's go and code it out!

First, let's select all the desired elements into meaningfully-named variables:

var displayElement = document.getElementById('display');
var incrementButtonElement = document.getElementById('increment');
var decrementButtonElement = document.getElementById('decrement');
var resetButtonElement = document.getElementById('reset');

Next, let's define the counter variable:

var displayElement = document.getElementById('display');
var incrementButtonElement = document.getElementById('increment');
var decrementButtonElement = document.getElementById('decrement');
var resetButtonElement = document.getElementById('reset');

var count = 0;

And now for the handlers:

var displayElement = document.getElementById('display');
var incrementButtonElement = document.getElementById('increment');
var decrementButtonElement = document.getElementById('decrement');
var resetButtonElement = document.getElementById('reset');

var count = 0;

incrementButtonElement.onclick = function() {
   count++;
   displayElement.textContent = count;
}

decrementButtonElement.onclick = function() {
   count--;
   displayElement.textContent = count;
}

resetButtonElement.onclick = function() {
   count = 0;
   displayElement.textContent = count;
}

And voila! We're done.

Let's test the counter produced.

Live Example

Wait a second. There's a problem in the counter...

If we decrement the counter when it displays 0, it changes to -1. This is not expected behavior. Ideally, we want the counter to remain at 0 if we decrement it at that stage.

So how could we solve this?

Well, just use an if to determine if count really needs to be changed when the decrement button is clicked, as shown below:

decrementButtonElement.onclick = function() {
   // If count is not 0, we should decrement it.

   if (count !== 0) {

      count--;

   }
   displayElement.textContent = count;
}

With the change applied, let's now try the counter.

Live Example

And it works flawlessly.