JavaScript හි මූලද්‍රව්‍ය කණ්ඩායමක සංස්කරණය

දැන් අපට එක් ඡේදයක් නොව බොහෝ ඡේද ඇතැයි සිතමු:

html<p>text1</p>
<p>text2</p>
<p>text3</p>

ඕනෑම ඡේදයක් මත ක්ලික් කිරීමෙන් එය සංස්කරණය කිරීම සඳහා ආදාන ක්ෂේත්‍රයක් (input) පෙනෙන පරිදි කරමු.

ඇත්තටම එවැනි කාර්යයක් අපට දුෂ්කර නොවේ, මන්ද බොහෝ කේතය කලින් පාඩමෙන් අපට ලැබුණු නිසා.

අපගේ කාර්යය විසඳීම සඳහා ඡේද හරහා ලූපයක් (loop) දක්වන්න සහ ලූපය තුළ කලින් පාඩමේ කේතය භාවිතා කරන්න (මෙම කේතය වෙනස් කිරීමට පවා අවශ්‍ය නොවේ):

javascriptlet 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);
  });
}