Counter Example: Vanilla JavaScript
Tags: programming, beginners, javascript, webdev
Published: 2023-01-03 18:55:37

---
title: Counter Example: Vanilla JavaScript
published: true
description: 
tags: programming, beginner, javascript, webdev
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-03 18:47 +0000
canonical_url: https://code-maven.com/vanilla-javascript-counter
series: counter
---

This code is part of the [counter example](https://dev.to/szabgab/counter-examples-4mln) project. If you are looking for the buzz-words for this project then this is a Single Page Application implemented using HTML5 and Vanilla JavaScript.

It has two buttons.
1. One of them is a counter. Every time you click on it the value on it will increase by one.
1. The other one is a reset button.


```html
<button id="counter">0</button>
<button id="reset">Reset</button>
  
 
<script>
function increment_counter() {
    let counter = document.getElementById('counter').innerHTML;
    counter++;
    console.log(counter);
    document.getElementById('counter').innerHTML = counter;
}

function reset_counter() {
    console.log('reset');
    document.getElementById('counter').innerHTML = 0;
}

document.getElementById('counter').addEventListener('click', increment_counter);
document.getElementById('reset').addEventListener('click', reset_counter);
</script>
```

[Try](https://code-maven.com/try/examples/javascript/vanilla-javascript-counter.html)

In this little animated gif you can see the two small buttons at the top and most of the view is taken up by the console where you can see the `console.log` messages.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7a9dj6oyuxyc8res3qy.gif)

At the top of the file we have two HTML buttons. Both have IDs for easier identification.

The JavaScript code has two functions and then two calls to `document.getElementById`.  These two calls will locate the HTML element with the ID given as a parameter and then connect a function to the "click" event  of each one of them. These are the two functions we have.

This means that when the user clicks on the HTML element with the ID `counter` the function `increment_counter` will be executed and when the user clicks on the element with the ID `reset` the `reset_counter` function will be called.

## Reset counter

The `reset_counter` function is the easier to explain:

```javascript
console.log('reset');
```

Is only there so we can see on the console of the browser that something happened.
Then we use the call

```javascript
document.getElementById('counter')
```

to locate the HTML element and `innerHTML` to set the content of the element to 0.

## Increment counter

Here we first copy the content of the HTML element to a variable we cleverly named `counter`.

Then we increment it by one using the `++` operator.

Then we have the `console.log` call. Just so we can see in the console what's happening.

Finally we write back the value the HTML document.

## Issues

Keeping our data (the counter) as part of the HTML is probably not a very good idea in a project more complex than this one. However, in this case it has the advantage that we don't need to think how we keep our data (which is normally in JavaScript) in sync with the display (which is the HTML).

This counter is also not persistent. If you reload the page the counter will be reset.