JavaScript හි මූලද්රව්ය කණ්ඩායමක සංස්කරණය
දැන් අපට එක් ඡේදයක් නොව බොහෝ ඡේද ඇතැයි සිතමු:
<p>text1</p>
<p>text2</p>
<p>text3</p>
ඕනෑම ඡේදයක් මත ක්ලික් කිරීමෙන් එය සංස්කරණය කිරීම සඳහා ආදාන ක්ෂේත්රයක් (input) පෙනෙන පරිදි කරමු.
ඇත්තටම එවැනි කාර්යයක් අපට දුෂ්කර නොවේ, මන්ද බොහෝ කේතය කලින් පාඩමෙන් අපට ලැබුණු නිසා.
අපගේ කාර්යය විසඳීම සඳහා ඡේද හරහා ලූපයක් (loop) දක්වන්න සහ ලූපය තුළ කලින් පාඩමේ කේතය භාවිතා කරන්න (මෙම කේතය වෙනස් කිරීමට පවා අවශ්ය නොවේ):
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', function func() {
let input = document.createElement('input');
input.value = elem.textContent;
elem.textContent = '';
elem.appendChild(input);
input.addEventListener('blur', function() {
elem.textContent = this.value;
elem.addEventListener('click', func);
});
elem.removeEventListener('click', func);
});
}
ul ටැගය ඇත. ඕනෑම
li එකක් මත ක්ලික් කිරීමෙන්
එහි ආදාන ක්ෂේත්රයක් (input) දිස්වන පරිදි කරන්න,
එමගින් එම li හි පාඨය සංස්කරණය කළ හැකිය.
HTML වගුවක් ඇත. ඕනෑම කොටුවක් මත ක්ලික් කිරීමෙන් එහි ආදාන ක්ෂේත්රයක් (input) දිස්වන පරිදි කරන්න, එමගින් එම කොටුවේ පාඨය සංස්කරණය කළ හැකිය.
