Råd for koding med eksempel på DOM i JavaScript

Anta at du står overfor en oppgave som er tilstrekkelig kompleks, og for å implementere den må du skrive en del kodelinjer.

En feil tilnærming vil være å prøve å skrive all koden for løsningen på en gang, og deretter begynne å teste den. I dette tilfellet er det stor sannsynlighet for at ingenting vil fungere, og du må lete etter feilen i en stor mengde kode.

Riktig tilnærming er å dele opp oppgaven i små, elementære trinn som du implementerer og umiddelbart tester for riktighet. På denne måten, selv om du gjør en feil et sted, vil du legge merke til problemet med en gang og rette det opp.

La oss prøve dette i praksis. Anta at du har avsnitt:

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

Anta at oppgaven din er å finne avsnitt med tall som er multiplum av 3, og finne summen av disse tallene.

Det første lille trinnet jeg vil foreslå er å få tak i avsnittene våre som en array og skrive denne arrayen til konsollen for å sjekke at vi har fått alt riktig. La oss gjøre det:

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

Det neste lille trinnet er å gå gjennom avsnittene våre med en loop og skrive hver enkelt av dem ut til konsollen separat:

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

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

Og nå i loopen, la oss skrive ut tekstene fra avsnittene våre:

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

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

La oss nå skrive ut tekstene fra de avsnittene hvis tall er delelig med 3:

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

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

Etter å ha forsikret oss om at vi får de riktige avsnittene, kan vi gå videre til å summere tallene deres:

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

Gitt en liste med årstall:

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

Få årstallene hvor summen av sifrene er lik 6. Finn summen av de funnete årstallene.