Råd för att skriva kod med exempel på DOM i JavaScript

Anta att du står inför en uppgift som är tillräckligt komplex, och för att implementera den behöver du skriva ett visst antal kodrader.

Ett felaktigt tillvägagångssätt skulle vara att försöka skriva hela lösningen på en gång, och sedan börja testa den. I det här fallet är risken stor att inget kommer att fungera, och du kommer att behöva leta efter fel i en stor mängd kod.

Ett korrekt tillvägagångssätt är att dela upp uppgiften i små elementära steg, som du implementerar och omedelbart kontrollerar deras korrekthet. I det här fallet, även om du gör ett misstag någonstans, kommer du att märka problemet direkt och kunna rätta till det.

Låt oss prova i praktiken. Anta att du har stycken:

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

Anta att uppgiften är att hitta stycken med tal som är jämnt delbara med 3, och hitta summan av dessa tal.

Det första lilla steget jag skulle föreslå är att få våra stycken som en array och skriva ut denna array till konsolen för att se att vi har fått allt korrekt. Låt oss göra det:

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

Nästa lilla steg är att gå igenom våra stycken med en loop och skriva ut var och en i konsolen var för sig:

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

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

Och nu i loopen skriver vi ut texten i våra stycken:

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

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

Låt oss nu skriva ut texterna för de stycken vars tal är delbart med 3:

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

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

Efter att ha försäkrat oss om att vi får de rätta styckena, kan vi börja summera deras 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);

Given en lista med år:

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

Få de år vars siffersumma är lika med 6. Hitta summan av de erhållna åren.