Als webdeveloper zul je ongetwijfeld fouten tegenkomen bij het werken met JavaScript. Codeerfouten zorgen ervoor dat het programma niet meer doet wat er verwacht wordt.

Om deze fouten te kunnen herstellen, moet je de foutmelding kunnen begrijpen, want pas dan begrijp je waarom de fout is opgetreden en hoe je hem kunt herstellen.

In deze tutorial zullen we het hebben over de “Uncaught TypeError: cannot set property” fout in JavaScript.

Je leert waarom deze fout optreedt, de verschillende redenen waarom je hem kunt tegenkomen, en de verschillende methoden om hem op te lossen.

Wat betekent “Uncaught TypeError: cannot set property” in JavaScript?

Een typeerror treedt vooral op als je een bewerking uitvoert met incompatibele gegevenstypen. In ons geval hebben we te maken met de “Uncaught TypeError: cannot set property” fout, een JavaScript fout die vooral optreedt als je probeert een property toe te wijzen aan een DOM element met een null waarde.

Deze fout kan om verschillende redenen optreden, zoals:

  • Het plaatsen van de script tag op de verkeerde plaats in je markup
  • Spelfouten bij het verwijzen naar DOM elementen
  • Toegang tot een ongedefinieerd of ongeldig DOM element

In de volgende paragrafen bespreken we de bovenstaande redenen, hoe ze de “Uncaught TypeError: cannot set property” fout kunnen veroorzaken met codevoorbeelden, en hoe je de fout kunt herstellen.

We bespreken ook hoe je kunt bepalen of een variabele null of undefined is.

Laten we beginnen!

Zo los je de “Uncaught TypeError: cannot set property” op in JavaScript

In dit gedeelte leer je de veel voorkomende oorzaken kennen van de “Uncaught TypeError: cannot set property” fout in JavaScript. Elk onderdeel dat volgt is gewijd aan een van die oorzaken en de oplossing ervan.

Je krijgt ook te zien hoe je de fout kunt oplossen met enkele praktische codevoorbeelden.

Ongeldige plaatsing van script tag

Wanneer een webpagina wordt geladen, wordt ook de JavaScript code geladen die voor de pagina is geschreven. De manier waarop JavaScript het Document Object Model (DOM) herkent is afhankelijk van de plaats van de script tag in je code.

Als je de script tag plaatst binnen de head tag of boven alle HTML elementen binnen de body tag, dan wordt het script uitgevoerd voordat het DOM klaar is.

Als JavaScript wordt uitgevoerd voordat het DOM klaar is, krijgt het geen volledige weergave van de DOM – wat betekent dat de meeste van je variabelen die gekoppeld zijn aan DOM elementen terugkomen als null.

Hier is een voorbeeld van een code die de “Uncaught TypeError: cannot set property” fout in JavaScript zou oproepen vanwege de positie van de script tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
    <script src="app.js"></script>
  </head>
  <body>
    <h1 id="heading"></h1>
  </body>
</html>

In bovenstaande code is de tag script geplaatst binnen de tag head. We hebben ook een h1 element met een id of heading.

Vervolgens proberen we tekst toe te wijzen aan het h1 element:

let heading = document.getElementById('heading');
heading.textContent = 'This is a heading';
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

Hoewel de bovenstaande code er prima uitziet, ontstond de fout “Uncaught TypeError: cannot set property”. Dit gebeurde omdat het script al vóór de DOM was geladen, dus ons JavaScript had geen kennis van de DOM elementen.

Deze fout zal ook optreden als je de tag script boven andere DOM elementen plaatst:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <script src="app.js"></script>
    <h1 id="heading"></h1>
  </body>
</html>

Nu staat de script tag boven de DOM elementen in de body tag, maar hij zal nog steeds de “Uncaught TypeError: cannot set property” fout opleveren omdat het script eerder laadt dan de DOM.

Om deze fout op te lossen moet je de tag script net voor de afsluitende tag body plaatsen. Zo worden alle DOM elementen geladen vóór het script.

Hier is een voorbeeld van correcte plaatsing:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1 id="heading"></h1>
    <script src="app.js"></script>
  </body>
</html>
let heading = document.getElementById('heading');
heading.textContent = 'This is a heading'

Wanneer de bovenstaande code wordt uitgevoerd, zal het h1 element zijn textContent ingesteld op “This is a heading”. Er zal geen fout optreden.

Spelfouten

Spelfouten zijn een andere oorzaak van de “Uncaught TypeError: cannot set property” fout.

Als je het attribuut (ID of klasse) dat gebruikt wordt om een DOM element in JavaScript te identificeren verkeerd spelt, verwijs je naar een niet-bestaand element, wat een null waarde oplevert.

Proberen een waarde toe te kennen aan een null waarde levert de “Uncaught TypeError: cannot set property” fout op.

Hier is een codevoorbeeld om je te helpen het te begrijpen:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1 id="heading"></h1>
    <script src="app.js"></script>
  </body>
</html>
let heading = document.getElementById('headin');
heading.textContent = 'Hello World!'
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

In bovenstaande code hebben we een h1 tag met een id van heading.

In de JavaScript code verwezen we naar de id maar met een spelfout. In plaats van “heading” schreven we “headin” – dat wil zeggen, document.getElementById('headin'); in plaats van document.getElementById('heading');.

Om zulke fouten te voorkomen, moet je er altijd voor zorgen dat je DOM elementen op de juiste manier worden verwezen, door het juiste attribuut met de juiste spelling te gebruiken.

Toegang tot een ongedefinieerd DOM element

In de vorige paragraaf zagen we hoe het verwijzen naar een verkeerd gespeld attribuut een “Uncaught TypeError: cannot set property” foutmelding kan geven. Hetzelfde is het geval als we proberen een DOM element te gebruiken dat niet bestaat.

In het onderstaande voorbeeld proberen we een id attribuut te gebruiken dat nog niet gedefinieerd is in de opmaak:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1></h1>
    <script src="app.js"></script>
  </body>
</html>
let heading = document.getElementById('headin');
heading.textContent = 'Hello World!'
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

Zoals hierboven te zien is, proberen we de textContent van een DOM element in te stellen dat niet bestaat. Er is geen element in onze HTML code dat een id van “heading” heeft, dus geeft dit een null waarde terug.

Als je de variabele heading naar de console logt, krijg je een waarde van null terug.

Zo bepaal je of een variabele “null” of “undefined” is

Op dit punt heb je als het goed is begrepen dat het toekennen van een waarde aan een variabele die null of undefined is, waarschijnlijk een “Uncaught TypeError: cannot set property” fout zal opleveren.

Maar je kunt bepalen of een variabele null of undefined; is voordat je er interactie mee hebt. Hoewel dit de fout niet oplost, geeft het wat duidelijkheid over waarom een functionaliteit niet werkt.

Voordat we bespreken hoe we in JavaScript kunnen bepalen of een variabele null of undefined is, is het belangrijk om het verschil te begrijpen tussen een null en een undefined waarde.

Een variabele is null wanneer een lege of onbekende waarde aan de variabele wordt toegekend. De vorige secties van deze tutorial tonen praktische voorbeelden van een null variabele.

Aan de andere kant is een variabele undefined als er geen waarde aan is toegekend:

let age;
console.log(age);
// undefined

In bovenstaande code werd de variabele age gedeclared, maar er werd geen waarde aan toegekend. Bij het loggen naar de console werd undefined teruggegeven.

Nu je het verschil weet tussen null en undefined, laten we eens kijken hoe je kunt bepalen of een variabele een van beide is.

Je kunt de losse equality operators (==) gebruiken om te bepalen of een variabele null of undefined is. Hier is een voorbeeld:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1 id="headin"></h1>
    <script src="app.js"></script>
  </body>
</html>
let heading = document.getElementById('headin');
if (heading == null) {
console.log('Variable is null - cannot assign value to a null variable');
} else {
heading.textContent = 'Hello World!';
}

In bovenstaande code hebben we een spelfout gemaakt bij het verwijzen naar een DOM element in JavaScript.

Met behulp van een if statement controleerden we of de waarde van de heading variabele null was: if (heading == null) {...}

Omdat het een null waarde teruggaf, zou “Variable is null – cannot assign value to a null variable” in de console worden gelogd. Als we geen null waarde hadden gekregen, dan zou de code in het blok else zijn uitgevoerd.

Als je je afvraagt waarom we geen undefined in het if statement hebben opgenomen, dan is dat omdat null == undefined in JavaScript staat, zodat de code in het if statement op beide fouten controleert.

Samenvatting

Foutmeldingen kunnen in sommige gevallen verwarrend zijn, maar ze helpen developers uit te zoeken waarom hun code niet werkt, zodat ze het kunnen oplossen en toekomstige voorvallen kunnen voorkomen.

Hoewel niemand van fouten houdt, zijn ze een goede manier om je te helpen je favoriete programmeertaal beter te begrijpen.

Bovendien geeft het oplossen van een codeerfout je meer context als je een soortgelijke fout tegenkomt in een ander project. De fout die we in dit artikel hebben besproken komt niet alleen aan de orde bij het werken aan vanille JavaScript projecten – je kunt hem ook tegenkomen bij het werken met JavaScript frameworks en bibliotheken.

Als je een app of website gaat bouwen, zijn er allerlei vaardigheden te leren en is er veel oefening nodig om deze vaardigheden efficiënt te gebruiken. Kinsta’s nieuwe Hobby pakket biedt het perfecte hostingplatform voor iedereen die een ruimte nodig heeft om te oefenen, van opkomende nieuwe programmeurs tot ervaren developers die hun werk willen adverteren of proof-of-concept apps willen deployen. En als je je vandaag aanmeldt voor welk pakket dan ook, krijg je $20 tegoed op je eerste maand.