Fout bij het benaderen van een array van elementen in JavaScript
Soms proberen beginnende programmeurs te werken met een array van elementen alsof ze één element hebben. Laten we kijken waar de essentie van deze fout ligt.
Stel dat er paragrafen zijn:
<p>1</p>
<p>2</p>
<p>3</p>
Stel dat een programmeur besloot om in de tekst van elke paragraaf dezelfde waarde te schrijven. Hiervoor kreeg hij de verwijzingen naar deze elementen in een variabele:
let elems = document.querySelectorAll('p');
Vervolgens heeft onze programmeur per ongeluk de variabele aangesproken alsof daar één element in zit, en niet een array. Als gevolg zal de tekst van de paragrafen niet veranderen, maar, kenmerkend genoeg, zal er ook geen fout in de console zijn:
elems.textContent = '!';
De juiste oplossing hier is om de array van elementen te doorlopen met een lus en voor elk element afzonderlijk de benodigde bewerking uit te voeren:
for (let elem of elems) {
elem.textContent = '!';
}