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();
}- 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
<!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();
}
});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.
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.