DOM සමඟ JavaScript හි කේත ලිවීම සඳහා උපදෙස්

ඔබට තරමක් සංකීර්ණ කාර්යයක් ඉදිරිපත් වී ඇතැයි සිතමු, එය ක්‍රියාත්මක කිරීම සඳහා කේතයේ පේළි ගණනක් ලිවීමට අවශ්‍ය වේ.

වැරදි ප්‍රවේශය වන්නේ සම්පූර්ණ විසඳුමේ කේතය එක්ව ලිවීමට උත්සාහ කිරීමයි, ඉන්පසු එය පරීක්ෂා කිරීමට පටන් ගැනීමයි. මෙම අවස්ථාවේදී, ඔබේ කේතය ක්‍රියා නොකිරීමේ ඉහළ සම්භාවිතාවක් ඇත, දෝෂය සෙවීමට සිදුවන්නේ විශාල කේත ප්‍රමාණයක් තුළයි.

නිවැරදි ප්‍රවේශය වන්නේ කාර්යය කුඩා මූලික පියවරවලට කඩා දැමීමයි, ඔබ ඒවා ක්‍රියාත්මක කර වහාම ඒවායේ නිවැරදිභාවය පරීක්ෂා කරනු ඇත. මෙම අවස්ථාවේදී, ඔබ කොතැනක හෝ වරදක් කළත්, ඔබට වහාම ගැටළුව දැක එය නිවරදි කර ගත හැකිය.

දැන් අපි එය ප්‍රායෝගිකව උත්සාහ කරමු. ඔබට පයි ගණනාවක් ඇතැයි සිතමු:

html<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>

ඔබට කාර්යයක් ඉදිරිපත් වී ඇතැයි සිතමු, අංක 3 න් ගුණාකාර වන අංක සහිත පයි සොයා ගන්න, සහ ඒවායේ අංකවල එකතුව සොයා ගන්න.

පළමු කුඩා පියවර වශයෙන්, මම යෝජනා කරමි අපගේ පයි අරාවක් ලෙස ලබා ගැනීමට සහ මෙම අරාව කොන්සෝලයට ප්‍රතිදානය කිරීමට, එවිට අපි සියල්ල නිවැරදිව ලබා ගත් බව පරීක්ෂා කර බැලිය හැකිය. අපි එය කරමු:

javascriptlet elems = document.querySelectorAll('p');
console.log(elems);

ඊළඟ කුඩා පියවර අවශ්‍ය වන්නේ අපගේ පයි චක්‍රයකින් පුරප්පා ගැනීමට සහ ඒ සෑම එකක්ම වෙන වෙනම කොන්සෝලයට ප්‍රතිදානය කිරීමට:

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  console.log(elem);
}

දැන් චක්‍රය තුළ අපගේ පයිවල පෙළ ප්‍රතිදානය කරමු:

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  console.log(elem.textContent);
}

දැන් අපි පෙළ ප්‍රතිදානය කරමු එම පයි වල, ඒවායේ අංකය 3 න් බෙදිය හැකි ඒවා:

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  let text = +elem.textContent;
  
  if (text % 3 === 0) {
    console.log(text);
  }
}

අපි නිවැරදි පයි ලබා ගන්නා බව සහතික කර ගැනීමෙන් පසු, ඒවායේ අංක එකතු කිරීමට පටන් ගත හැකිය:

javascriptlet elems = document.querySelectorAll('p');
let sum = 0;

for (let elem of elems) {
  let text = +elem.textContent;
  
  if (text % 3 === 0) {
    sum += text;
  }
}

console.log(sum);

html<ul>
  <li>2000</li>
  <li>2004</li>
  <li>2021</li>
  <li>2022</li>
  <li>2025</li>
  <li>2031</li>
</ul>