Råd til kodskrivning med eksempel på DOM i JavaScript

Lad os antage, at du står overfor en opgave af tilstrækkelig kompleksitet, hvor implementeringen kræver at skrive et vist antal kodelinjer.

En forkert tilgang ville være at forsøge at skrive hele løsningens kode på én gang og derefter begynde at teste den. I dette tilfælde er der stor sandsynlighed for, at intet vil fungere, og du bliver nødt til at lede efter fejlen i en stor mængde kode.

En korrekt tilgang er at opdele opgaven i små, elementære trin, som du implementerer og straks kontrollerer deres rigtighed. På denne måde, selv hvis du laver en fejl et sted, vil du straks bemærke problemet og rette det.

Lad os prøve det i praksis. Antag, at du har disse afsnit:

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

Antag, at din opgave er at finde de afsnit, hvis tal er multipla af 3, og finde summen af deres tal.

Det første lille trin jeg vil foreslå er at få vores afsnit som et array og udskrive dette array til konsollen for at se, om vi har fået alt korrekt. Lad os gøre det:

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

Det næste lille trin er at gennemgå vores afsnit med en løkke og udskrive hver enkelt af dem i konsollen separat:

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

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

Og nu i løkken, lad os udskrive teksterne fra vores afsnit:

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

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

Lad os nu udskrive teksterne fra de afsnit, hvis tal er delelige med 3:

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

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

Efter at have sikret os, at vi får de korrekte afsnit, kan vi gå videre til at summere deres tal:

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

Givet en liste med årstal:

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

Få de årstal, hvis cifres sum er lig med 6. Find summen af de opnåede årstal.