Project - Event Listener
Using an Event Listener
This is a copy of the previous project.
Now using Event Listeners instead of Onclick Attributes.
0
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
<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
// 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();
}
Try it Yourself »
- 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
Improvements
HTML Code
<!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>
Notice that the <script> tag is placed at the bottom, before
</body>.
counter.js
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();
}
});
Try it Yourself »
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:
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 lovalStorage. - JavaScript Event Listener
The counter project using event listener instead of onclick. - JavaScript Do-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.
