පාඩම 2: JavaScript සම්බන්ධ කිරීම සහ Elements තෝරාගැනීම 🎯

HTML elements, JavaScript තුලට ලබාගන්නා ආකාරය (selecting/grabbing) ඉගෙන ගනිමු.

---

`app.js` ගොනුව සෑදීම

ඔබගේ `counter.html` ගොනුව ඇති ස්ථානයේම, `app.js` නමින් අලුත් ගොනුවක් සාදන්න. අපගේ සියලුම JavaScript කේත ලියන්නේ මෙම ගොනුවේය.

HTML Elements තෝරාගැනීම (DOM Selection)

JavaScript මගින් HTML element එකක් පාලනය කිරීමට නම්, පළමුව එය තෝරාගෙන variable එකකට ලබාගත යුතුය. ඒ සඳහා `document.getElementById()` ක්‍රමය භාවිතා කරයි. මෙය HTML එකේ ඇති `id` එක මගින් අදාළ element එක සොයා දෙයි.

ඔබගේ `app.js` ගොනුවට පහත කේතය ඇතුළත් කරන්න.

// 1. අවශ්‍ය HTML elements තෝරාගෙන variables වලට දාගැනීම

// අගය පෙන්වන h1 element එක
const countDisplay = document.getElementById('count-display');

// බොත්තම් තුන
const incrementBtn = document.getElementById('increment-btn');
const decrementBtn = document.getElementById('decrement-btn');
const resetBtn = document.getElementById('reset-btn');

// මේවා නිවැරදිව තෝරාගත්තාදැයි console එකේ බලාගන්න පුළුවන්
console.log(countDisplay);
console.log(incrementBtn);

දැන් `counter.html` ගොනුව browser එකේ open කර, Right-click > Inspect > Console වෙත ගියවිට, අප තෝරාගත් HTML elements එහි පෙන්වනු ඇත. මෙයින් අදහස් වන්නේ JavaScript දැන් එම elements "හඳුනන" බවයි.

⬅️ මුල් පිටුවට