පාඩම 4: Button Clicks සඳහා Events එකතු කිරීම 🎧

අවසන් පියවර ලෙස, බොත්තම් click කළ විට අප සෑදූ functions ක්‍රියාත්මක වීමට සලස්වමු.

සජීවී ආදර්ශනය (Live Demo) 🚀

මෙම පාඩම අවසානයේ ඔබ නිර්මාණය කළ සම්පූර්ණ Counter App එක මෙයයි. පහත බොත්තම් click කර ක්‍රියාකාරීත්වය පරීක්ෂා කරන්න!

Event Listeners සම්බන්ධ කිරීම

JavaScript වල addEventListener යනු යම් element එකක 'click' වැනි event එකක් සිදු වූ විට, නියමිත function එකක් ක්‍රියාත්මක කරවන ක්‍රමයකි. අප දැන් එක් එක් බොත්තමට අදාළ function එක 'click' event එක සඳහා සම්බන්ධ කළ යුතුය.

// 3. Event Listeners එකතු කිරීම
incrementBtn.addEventListener('click', increment);
decrementBtn.addEventListener('click', decrement);
resetBtn.addEventListener('click', reset);

HTML සහ JavaScript සම්බන්ධය 🤝

JavaScript, HTML ගොනුවේ ඇති elements හඳුනාගන්නේ ඒවාට ලබා දී ඇති ప్రత్యేక `id` attribute එක මගිනි. document.getElementById('count-display') යන කේතය ක්‍රියාත්මක වන විට, එය counter.html ගොනුව පරීක්ෂා කර id="count-display" ලෙස ඇති element එක තෝරාගෙන countDisplay නම් variable එකට ලබා දෙයි. අපගේ project එකේදී මෙම සම්බන්ධය සිදුවන ආකාරය පහත දැක්වේ.

<h1 class="display-1" id="count-display">0</h1>

<button class="btn btn-success me-2" id="increment-btn">Plus (+)</button>

<button class="btn btn-warning me-2" id="reset-btn">Reset</button>

<button class="btn btn-danger" id="decrement-btn">Minus (-)</button>

සම්පූර්ණ `app.js` කේතය

ඉහත සම්බන්ධතාවය මත පදනම්ව, සියලුම පියවර අවසානයේ, ඔබගේ app.js ගොනුව මෙසේ දිස්විය යුතුය.

// 1. HTML elements තෝරාගැනීම
const countDisplay = document.getElementById('count-display');
const incrementBtn = document.getElementById('increment-btn');
const decrementBtn = document.getElementById('decrement-btn');
const resetBtn = document.getElementById('reset-btn');

// 2. Counter Logic එක සහ Functions
let count = 0;

function increment() {
    count++; // count = count + 1;
    countDisplay.textContent = count;
}

function decrement() {
    count--; // count = count - 1;
    countDisplay.textContent = count;
}

function reset() {
    count = 0;
    countDisplay.textContent = count;
}

// 3. Event Listeners එකතු කිරීම
incrementBtn.addEventListener('click', increment);
decrementBtn.addEventListener('click', decrement);
resetBtn.addEventListener('click', reset);

සුබ පැතුම්! 🎉 ඔබ දැන් මූලික JavaScript භාවිතයෙන් සම්පූර්ණ Counter App එකක් සාදා ඇත. ඉහත සජීවී ආදර්ශනය ක්‍රියා කරන්නේ මෙම සම්පූර්ණ කේතය නිසාය.