← Project - localStorage Counter Project - To-Do List →

JS TutorialLesson #132

Project - Event Listener

This is a copy of the previous project.

Using an Event Listener

This is a copy of the previous project.

Now using Event Listeners instead of Onclick Attributes.

+ - Reset Save Load

Using Event Listeners

Using addEventListener() makes it easier to:

Keep HTML and JavaScript separated
Add multiple events to the same element
Write cleaner code in bigger projects

HTML Code

Example Code

html

Try it Yourself

## Counter

0

 +

 -

 Reset

 Save

 Load

// JavaScript goes here

JavaScript Code

Example Code

javascript

Try it Yourself

// Add event listeners

document.getElementById("btnPlus").addEventListener("click", increaseCount);

document.getElementById("btnMinus").addEventListener("click", decreaseCount);

document.getElementById("btnReset").addEventListener("click", resetCount);

document.getElementById("btnSave").addEventListener("click", saveCount);

document.getElementById("btnLoad").addEventListener("click", loadCount);

// Declare the counter

let count = 0;

// Load counter when the page opens

loadCount();

// Function to display the counter

function updateCount() {

  document.getElementById("count").innerHTML = count;

}

// Function to increase the counter

function increaseCount() {

  count++;

  updateCount();

}

// Function to decrease the counter

function decreaseCount() {

  if (count > 0) {

  count--;

    updateCount();

  }

}

// Function to reset the counter

function resetCount() {

  count = 0;

  updateCount();

}

// Function to save the counter

function saveCount() {

  localStorage.setItem("count", count);

}

// Function to load the counter

function loadCount() {

  let saved = localStorage.getItem("count");

  if (saved !== null) {

    count = Number(saved);

  }

  updateCount();

}

JavaScript is moved to an external file (counter.js)
Uses DOMContentLoaded so JavaScript runs only after HTML is ready
Cleaner structure using small functions + element variables
Shows a short Saved! message
Shows a short Loaded! message

HTML Code

Example Code

html

Try it Yourself

## Counter

0

 +

 -

 Reset

 Save

 Load

Notice that the tag is placed at the bottom, before > .

counter.js

Example Code

javascript

Try it Yourself

document.addEventListener("DOMContentLoaded", function () {

// Declare the counter

let count = 0;

// Use element variables

const countEl = document.getElementById("count");

const msgEl = document.getElementById("message");

const btnPlus = document.getElementById("btnPlus");

const btnMinus = document.getElementById("btnMinus");

const btnReset = document.getElementById("btnReset");

const btnSave = document.getElementById("btnSave");

const btnLoad = document.getElementById("btnLoad");

// Add event listeners

btnPlus.addEventListener("click", increaseCount);

btnMinus.addEventListener("click", decreaseCount);

btnReset.addEventListener("click", resetCount);

btnSave.addEventListener("click", saveCount);

btnLoad.addEventListener("click", loadCount);

// Function to display the counter

function updateCount() {

  document.getElementById("count").innerHTML = count;

}

// Function to diplay message

function showMessage(text) {

  msgEl.innerHTML = text;

  setTimeout(function () {

    msgEl.innerHTML = "";

  }, 3000);

}

// Function to increase the counter

function increaseCount() {

  count++;

  updateCount();

}

// Function to decrease the counter

function decreaseCount() {

  count--;

  updateCount();

}

// Function to reset the counter

function resetCount() {

  count = 0;

  updateCount();

}

// Function to save the counter

function saveCount() {

  localStorage.setItem("count", count);

  showMessage("Saved!");

}

// Function to load the counter

function loadCount() {

  let saved = localStorage.getItem("count");

  if (saved !== null) {

    count = Number(saved);

    showMessage("Loaded!");

  }

  updateCount();

}

});

JavaScript in External File

Using counter.js makes your project:

More Organized
Keep HTML and JavaScript separated
Easier to read and to reuse
More like real-world projects

DOMContentLoaded

Why use DOMContentLoaded?

When you use an external JavaScript file, the browser may load the script before the HTML is ready. So we use: ### Example ``javascript document.addEventListener("DOMContentLoaded", function() { // JavaScript code }); `` This means: Run the JavaScript code after the page has finished loading the HTML.

JavaScript Projects > JavaScript Counter > A counter project with restore and save in localStorage. > JavaScript Event Listener > The counter project using event listener instead of onclick. > JavaScript To-Do List > A do-do list saved in an array in local storage. > JavaScript Modal Popup > A modal popup window that appears on top of the page. > JavaScript Form Validation > An HTML Form with form validation.

Interactive Code Examples

HTML Code

html

Try it Yourself

JavaScript syntax and algorithm demonstration.

<h2>Counter</h2>



<p id="count" style="font-size:40px;">0</p>



<button id="btnPlus">+</button>

<button id="btnMinus">-</button>

<button id="btnReset">Reset</button>

<button id="btnSave">Save</button>

<button id="btnLoad">Load</button>



<script>

// JavaScript goes here

</script>

JavaScript Code

javascript

Try it Yourself

Interactive runnable JavaScript example from EA Academy.

Live Output Preview:

HTML Code

html

Try it Yourself

JavaScript syntax and algorithm demonstration.

<!DOCTYPE html>

<html>

<body>



<h2>Counter</h2>



<p id="count" style="font-size:40px;">0</p>



<button id="btnPlus">+</button>

<button id="btnMinus">-</button>

<button id="btnReset">Reset</button>

<button id="btnSave">Save</button>

<button id="btnLoad">Load</button>



<script  src="counter.js"></script>



</body>

</html>

counter.js

javascript

Try it Yourself

Interactive runnable JavaScript example from EA Academy.

Live Output Preview:

Example 5

javascript

Try it Yourself

JavaScript syntax and algorithm demonstration.

document.addEventListener("DOMContentLoaded", function() {

// JavaScript code

});

Previous: Project - localStorage Counter Next: Project - To-Do List