Fejl er en central del af det at lære og bruge et programmeringssprog. Fejlmeddelelser hjælper dig med at forstå, hvad der er gået galt et sted i din kode.

Mens nogle fejlmeddelelser er ligetil og lette at forstå, kan andre være lidt forvirrende, når du ser dem.

I denne vejledning vil vi tale om en af de mest almindelige JavaScript-fejl – “uncaught typeerror: cannot read property”-fejlen.

Ved slutningen af denne tutorial bør du forstå, hvad “uncaught typeerror: cannot read property” betyder, de almindelige årsager, og hvordan du løser dem.

Hvad betyder “uncaught typeerror: cannot read property” i JavaScript?

Fejlen “uncaught typeerror: cannot read property” opstår hovedsageligt, når du forsøger at bruge eller få adgang til en undefined-variabel. Denne fejl kan opstå, når du bruger vanilla JavaScript eller en hvilken som helst Javascript-framework.

Du kan nemt opdage fejl under kodning ved at bruge forskellige udviklerværktøjer som Chrome dev tools og Kinsta one-click staging-værktøjet til at opfange fejl, teste din kode og meget mere.

Sådan løser du fejlen “uncaught typeerror: cannot read property” i JavaScript

I de følgende afsnit fremhæver vi nogle af årsagerne til “uncaught typeerror: cannot read property”-fejlen, og hvordan du løser dem ved hjælp af kodeeksempler.

Adgang til en objektegenskab med en værdi på udefineret

I dette afsnit vil vi diskutere en af de mulige årsager til fejlen “uncaught typeerror: cannot read property” i JavaScript. Dette har at gøre med adgang til en objektegenskab, der endnu ikke er udefineret.

Her er et eksempel:

let person;

I koden ovenfor har vi oprettet en variabel kaldet person. Hensigten er at gøre denne variabel til et objekt med egenskaber som name, age, hobby.

Hvis du glemmer at oprette disse egenskaber, vil du få en fejl, når du forsøger at få adgang til dem. Det vil sige:

let person;
console.log(person.name);
// Uncaught TypeError: Cannot read properties of undefined (reading 'name')

Som det kan ses ovenfor, forsøgte vi at få adgang til name-egenskaben, som ikke eksisterer, så vi fik en fejl, der siger: Uncaught TypeError: Cannot read properties of undefined (reading ‘name’).

Dette kan ske for alle, da du måske glemmer at oprette/tilføje egenskaber til dit objekt.

Lad os gå videre og tilføje nogle egenskaber til objektet for at rette fejlen:

let person = {
  name: "John",
  age: 200,
  hobby: "coding"
}
console.log(person.name);
// John

I koden ovenfor har vi tilføjet name-egenskaben, så når du forsøger at få adgang til den, får du værdien “John” tilbage.

Adgang til et element, der ikke findes i et array

Ligesom vi så i sidste afsnit med objekter, vil du også få fejlen “uncaught typeerror: cannot read property” udløst, hvis du forsøger at få adgang til et element i et array, der endnu ikke er initialiseret.

Her er et eksempel:

let arr;
console.log(arr[0]);
// Uncaught TypeError: Cannot read properties of undefined (reading '0')

I eksemplet ovenfor forsøgte vi at få adgang til det første element i et array kaldet arr.

Arrayet er blevet erklæret, men ikke initialiseret – det betyder, at der endnu ikke er blevet tildelt noget element til det.

For at rette op på dette, tilføjer vi elementer til arrayet, før vi får adgang til dem. Det vil sige:

let arr = [2,4,6,8]
console.log(arr[0]);
// 2

Adgang til et DOM-element, der ikke eksisterer

Når du arbejder med Document Object Model (DOM) i JavaScript, kan du støde på “uncaught typeerror: cannot read property”.

Dette kan ske af forskellige årsager, f.eks. stavefejl, mens du refererer til DOM-elementet, adgang til et element, der ikke findes, eller adgang til et element, før DOM er blevet indlæst (vi taler om dette i næste afsnit).

I dette afsnit vil du se et eksempel, der kaster “uncaught typeerror: cannot read property”-fejlen for adgang til et ikke-eksisterende DOM-element.

Her er HTML-koden:

<!DOCTYPE html>
<html>
  <head>
    <title>Error Tutorial</title>
  </head>
  <body>
    <h1 id="content">Hello World!</h1>
    <script src="app.js"></script>
  </body>
</html>

I ovenstående kode har vi oprettet et grundlæggende HTML-dokument med et h1-element med ID “content”.

Her er JavaScript-koden:

let content = document.getElementById("constent");
console.log(content.textContent);
// Uncaught TypeError: Cannot read properties of null (reading 'textContent');

Ovenstående kode giver anledning til fejlen “uncaught typeerror: cannot read property”, selv om det ser ud til, at vi har gjort alt rigtigt.

Det er ret nemt at overse, hvad der udløser denne fejl. Den opstår, fordi vi stavede “constent” i stedet for “content”, mens vi henviste til ID’et for h1-elementet.

Det vil sige document.getElementById("constent"); i stedet for document.getElementById("content");.

Den samme fejl vil blive udløst, hvis du forsøger at referere til et ID eller et klassens navn, der endnu ikke er oprettet i DOM.

For at løse dette kan du blot kontrollere for stavefejl eller sikre dig, at det element, der refereres til, faktisk findes i DOM.

Placering af scriptelementet over andre DOM-elementer inden for body-tagget

Placeringen af dit script-element bestemmer, hvordan din JavaScript-kode udføres i browseren.

Hvis du placerer script-elementet over alle andre elementer i kroppen af dit HTML-dokument, vil JavaScript-koden blive kørt, før DOM er blevet indlæst.

Det betyder, at JavaScript ikke vil have nogen reference til DOM-elementerne, fordi det ikke har ventet på, at de blev indlæst, før det blev eksekveret.

Her er et eksempel:

<!DOCTYPE html>
<html>
  <head>
    <title>Error Tutorial</title>
  </head>
  <body>
    <script src="app.js"></script>
    <h1 id="content">Hello World!</h1>
  </body>
</html>

I koden ovenfor placerede vi script -elementet over h1 -elementet.

Her er JavaScript-koden, hvor vi forsøger at henvise til h1 -elementet ved hjælp af dets ID:

let content = document.getElementById("content");
console.log(content.textContent);
// Uncaught TypeError: Cannot read properties of null (reading 'textContent');

Som forventet blev fejlen “uncaught typeerror: cannot read property” kastet på os, fordi JavaScript-koden før h1-elementet kunne registreres i DOM’en.

For at løse dette problem skal du altid placere dit script-element før det afsluttende body-tag, dvs. under alle andre DOM-elementer i dokumentets krop. På denne måde vil scriptet begynde at køre, efter at hvert element i DOM er blevet indlæst.

<!DOCTYPE html>
<html>
  <head>
    <title>Error Tutorial</title>
  </head>
  <body>
    <h1 id="content">Hello World!</h1>
    <script src="app.js"></script>
  </body>
</html>

Opsummering

Fejl er en uundgåelig del af det at være udvikler. Selv om de kan gøre dig frustreret, mens du koder, kan de også hjælpe dig med at lære mere og mestre det programmeringssprog, du bruger.

Når du står over for en fejl, bør du altid forsøge at forstå fejlmeddelelsen, fordi det vil hjælpe dig med at vide, hvor du skal begynde, og hvad du skal rette. Du vil også være i stand til at rette andre fejl med lignende fejlmeddelelser.

Hvis du skal bygge et websted, er der en række færdigheder, der skal læres, og der kræves en masse øvelse for at bruge disse færdigheder effektivt. DevKinsta gør processen lettere fra design, udvikling og implementering, alt sammen på din lokale maskine. DevKinsta bruges af over 25.000 udviklere, webdesignere og freelancere. Tjek det ud gratis i dag.