Tips voor het schrijven van code aan de hand van DOM in JavaScript

Stel dat je een taak hebt die complex genoeg is, waarvoor je een behoorlijk aantal regels code moet schrijven om deze te implementeren.

Een verkeerde aanpak is om te proberen alle code van de oplossing in één keer te schrijven, en dan pas te beginnen met testen. In dat geval is de kans groot dat er niets werkt, en je een fout moet zoeken in een grote hoeveelheid code.

Een correcte aanpak is het opdelen van de taak in kleine, elementaire stappen, die je implementeert en onmiddellijk controleert op correctheid. Op deze manier, zelfs als je ergens een fout maakt, merk je dit meteen en kun je het probleem verhelpen.

Laten we het in de praktijk proberen. Stel dat je de volgende alinea's hebt:

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

Stel dat je de taak hebt om de alinea's te vinden met getallen die deelbaar zijn door 3, en de som van deze getallen te berekenen.

Als eerste kleine stap zou ik voorstellen om onze alinea's op te halen als een array en deze array in de console uit te voeren, om te controleren of we alles correct hebben gekregen. Laten we dit doen:

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

De volgende kleine stap is om onze alinea's te doorlopen met een lus en elk van hen afzonderlijk in de console uit te voeren:

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

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

En nu voeren we in de lus de teksten van onze alinea's uit:

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

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

Laten we nu de teksten uitvoeren van die alinea's waarvan het getal deelbaar is door 3:

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

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

Na te hebben gecontroleerd dat we de juiste alinea's krijgen, kunnen we overgaan tot het optellen van hun getallen:

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

Gegeven een lijst met jaren:

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

Verkrijg de jaren waarvan de som van de cijfers gelijk is aan 6. Bereken de som van de verkregen jaren.