Porady dotyczące pisania kodu na przykładzie DOM w JavaScript

Załóżmy, że przed tobą stoi zadanie o wystarczającej złożoności, do realizacji którego potrzeba napisać pewną liczbę linii kodu.

Niepoprawnym podejściem będzie próba napisania całego kodu rozwiązania od razu, a dopiero potem rozpoczęcie jego testowania. W tym przypadku istnieje wysokie prawdopodobieństwo, że nic nie zadziała, a błąd będzie trzeba szukać w dużej ilości kodu.

Prawidłowym podejściem jest podział zadania na małe, elementarne kroki, które będziesz implementować i od razu sprawdzać ich poprawność. W tym przypadku, nawet jeśli gdzieś popełnisz błąd, od razu zauważysz problem i go naprawisz.

Spróbujmy w praktyce. Załóżmy, że masz akapity:

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

Załóżmy, że Twoim zadaniem jest znalezienie akapitów z liczbami podzielnymi przez 3, i obliczenie sumy tych liczb.

Jako pierwszy mały krok proponuję pobrać nasze akapity w postaci tablicy i wypisać tę tablicę w konsoli, żeby zobaczyć, czy wszystko pobraliśmy poprawnie. Zróbmy to:

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

Następnym małym krokiem należy przejść przez nasze akapity pętlą i wypisać każdy z nich w konsoli osobno:

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

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

A teraz w pętli wypiszmy teksty naszych akapitów:

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

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

Teraz wypiszmy teksty tych akapitów, których liczba dzieli się przez 3:

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

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

Po upewnieniu się, że otrzymujemy poprawne akapity, można przystąpić do sumowania ich liczb:

let 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);

Dana jest lista z latami:

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

Pobierz lata, których suma cyfr wynosi 6. Oblicz sumę uzyskanych lat.