Felmeddelanden är en central del i lärandet och användandet av alla programmeringsspråk. De brukar hjälpa dig att förstå vad som har gått fel någonstans i din kod.

Medan vissa felmeddelanden är enkla och lätta att förstå så kan andra vara lite förvirrande när du ser dem.

I den här guiden så ska vi tala om ett av de vanligaste JavaScript-felen – ”uncaught typeerror: cannot read property”.

I slutet av den här handledningen så bör du förstå vad ”uncaught typeerror: cannot read property” betyder, de vanligaste orsakerna och hur man åtgärdar dem.

Vad betyder ”uncaught typeerror: cannot read property” i JavaScript?

Felet ”uncaught typeerror: cannot read property” uppstår främst när du försöker använda eller få tillgång till en undefined-variabel. Det här felet kan uppstå när du använder vanilla JavaScript eller något Javascript-ramverk.

Du kan enkelt upptäcka fel när du kodar genom att använda olika utvecklarverktyg som Chrome dev tools och Kinsta’s enklicks iscensättningsverktyg för att fånga upp fel, testa din kod med mera.

Så här åtgärdar du felet ”uncaught typeerror: cannot read property” i JavaScript

I de följande avsnitten så lyfter vi fram några av orsakerna till felet ”uncaught typeerror: cannot read property” och visar hur man åtgärdar dem med hjälp av kodexempel.

Åtkomst till en objektegenskap med ett odefinierat värde

I det här avsnittet så diskuterar vi en av de möjliga orsakerna till felet ”uncaught typeerror: cannot read property” i JavaScript. Detta har att göra med åtkomst till en objektegenskap som ännu inte är definierad.

Här är ett exempel:

let person;

I koden ovan så har vi skapat en variabel som heter person. Avsikten är att göra denna variabel till ett objekt med egenskaper som name, age, hobby.

Om du glömmer att skapa dessa egenskaper så får du ett felmeddelande när du försöker komma åt dem. Det vill säga:

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

Som det framgår ovan så försökte vi komma åt egenskapen name, som inte finns. Som ett resultat så fick vi felmeddelandet: Uncaught TypeError: Cannot read properties of undefined (reading ’name’).

Detta kan hända vem som helst eftersom du kanske glömmer att skapa/lägga till egenskaper till ditt objekt.

Låt oss fortsätta och lägga till några egenskaper till objektet för att åtgärda felet:

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

I koden ovan så har vi lagt till egenskapen name så när du försöker komma åt den får du tillbaka värdet ”John”.

Åtkomst till ett element som inte finns i en array

Precis som vi såg i det sista avsnittet med objekt så möter du även felet ”uncaught typeerror: cannot read property” om du försöker komma åt ett element i en array som ännu inte har initialiserats.

Här är ett exempel:

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

I exemplet ovan så försökte vi komma åt det första elementet i en array som heter arr.

Arrayen har deklarerats men inte initialiserats – detta betyder att inget element har tilldelats den ännu.

För att åtgärda detta så lägger vi till element till arrayen innan vi får tillgång till dem. Det vill säga:

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

Åtkomst till ett DOM-element som inte finns

När du arbetar med Document Object Model (DOM) i JavaScript så kan du stöta på ”uncaught typeerror: cannot read property”.

Detta kan hända av olika anledningar. Det kan exempelvis bero på stavfel när du hänvisar till DOM-elementet, åtkomst till ett element som inte finns eller åtkomst till ett element innan DOM har laddats (vi kommer att tala om detta i nästa avsnitt).

I det här avsnittet så kommer du att se ett exempel som kastar felet ”uncaught typeerror: cannot read property” för åtkomst till ett obefintligt DOM-element.

Här är 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 koden ovan så har vi skapat ett grundläggande HTML-dokument med ett h1-element med ID ”content”.

Här är JavaScript-koden:

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

Koden ovan ger upphov till felet ”uncaught typeerror: cannot read property” trots att det ser ut som att vi gjorde allting rätt.

Det är ganska lätt att missa vad som orsakar detta fel. Det beror på att vi stavade ”constent” i stället för ”content” när vi hänvisade till ID för h1-elementet.

Det vill säga document.getElementById("constent"); i stället för document.getElementById("content");.

Samma fel kommer att uppstå om du försöker att referera till ett ID eller ett klassnamn som ännu inte har skapats i DOM.

För att åtgärda detta så kan du helt enkelt kontrollera om det finns stavfel eller se till att det element som refereras faktiskt finns i DOM.

Placering av skriptelementet ovanför andra DOM-element i kroppsdelen

Placeringen av ditt script-element avgör hur din JavaScript-kod exekveras i webbläsaren.

Om du placerar script-elementet ovanför alla andra element i HTML-dokumentets huvuddel kommer JavaScript-koden att köras innan DOM har laddats.

Detta innebär att JavaScript inte kommer att ha någon referens till DOM-elementen eftersom den inte väntade på att de skulle laddas innan den utfördes.

Här är ett exempel:

<!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 ovan så har vi placerat script-elementet ovanför h1-elementet.

Här är JavaScript-koden där vi försöker att referera till h1-elementet med hjälp av dess ID:

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

Som väntat så mötte vi felet ”uncaught typeerror: cannot read property” eftersom JavaScript-koden innan h1-elementet kunde registreras i DOM.

För att lösa det här problemet så ska du alltid placera ditt script-element före den avslutande body-taggen, det vill säga under alla andra DOM-element i dokumentets kropp. På så sätt kommer skriptet att börja köras efter att varje element i DOM har laddats.

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

Sammanfattning

Fel är en oundviklig del av att vara utvecklare. Även om de kan göra dig frustrerad när du kodar så kan de även hjälpa dig att lära dig mer och behärska det programmeringsspråk som du använder.

När du ställs inför ett fel så bör du alltid försöka förstå felmeddelandet eftersom det hjälper dig att veta var du ska börja och vad du ska åtgärda. Du kommer även att kunna åtgärda andra fel med liknande felmeddelanden.

Om du ska bygga en webbplats så finns det en mängd olika färdigheter att lära sig och det krävs mycket övning för att använda dessa färdigheter på ett effektivt sätt. DevKinsta underlättar processen från design, utveckling och distribuering, allt på din lokala maskin. DevKinsta används av över 25 000 utvecklare, webbdesigners och frilansare. Kolla in det kostnadsfritt idag.