Парады па напісанню кода на прыкладзе 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>