Som webbutvecklare kommer du säkert att stöta på fel när du arbetar med JavaScript. Kodningsfel hindrar applikationen från att göra det som förväntas.

För att kunna åtgärda dessa fel måste du kunna förstå felmeddelandet. Det hjälper dig nämligen att förstå varför felet uppstod och hur du kan åtgärda det.

I den här handledningen kommer vi att prata om felet ”uncaught typeerror: cannot set property” i JavaScript.

Du kommer att lära dig varför det här felet uppstår, de olika orsakerna till varför du kan stöta på det och därefter olika metoder för att åtgärda det.

Vad betyder ”Uncaught Typeerror: Cannot Set Property” i JavaScript?

Ett typeerror uppstår främst när du utför en operation som involverar inkompatibla datatyper. I vårt fall handlar det om felet ”uncaught typeerror: cannot set property”. Det är ett JavaScript-fel som huvudsakligen uppstår när du försöker tilldela en egenskap till ett DOM-element med ett null-värde.

Felet kan uppstå av olika anledningar, exempelvis:

  • Placering av script-taggen på fel plats i din markup
  • Stavfel när du hänvisar till DOM-element
  • Åtkomst till ett odefinierat eller ogiltigt DOM-element

I de följande avsnitten diskuterar vi orsakerna ovan. Vi visar dig sedan hur de kan orsaka felet ”uncaught typeerror: cannot set property” med kod-exempel och hur du åtgärdar detta.

Vi kommer dessutom att tala om hur du kan avgöra om en variabel är null eller undefined.

Nu sätter vi igång!

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

I det här avsnittet får du lära känna de vanligaste orsakerna till felet ”uncaught typeerror: cannot set property” i JavaScript. Varje underavsnitt som följer är tillägnat en av dessa orsaker och dess lösning.

Du kommer dessutom att få visualisera hur du åtgärdar felet med några praktiska kod-exempel.

Felaktig placering av script-taggen

När en webbsida laddas så laddas även den JavaScript-kod som har skrivits för sidan. Det sätt på vilket JavaScript känner igen Document Object Model (DOM) är beroende av var du placerar script-taggen i din kod.

Om du placerar script-taggen inom head-taggen eller ovanför alla HTML-element inom body-taggen kommer skriptet att exekveras innan DOM är klar.

När JavaScript körs innan DOM är redo får det inte en fullständig representation av DOM. Som ett resultat så kommer de flesta av dina variabler som är kopplade till DOM-element att återges som null.

Här är ett exempel på en kod som skulle ge upphov till felet ”uncaught typeerror: cannot set property” i JavaScript på grund av positionen för script-taggen:

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

I koden ovan är script-taggen placerad inom head-taggen. Vi har dessutom ett h1-element med en id av heading.

Därefter ska vi försöka tilldela text till h1-elementet:

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

Även om koden ovan ser bra ut, uppstod felet ”uncaught typeerror: cannot set property”. Detta hände eftersom skriptet redan hade laddats före DOM. Vår JavaScript hade med andra ord ingen kunskap om DOM-elementen.

Det här felet kommer dessutom att uppstå om du placerar script-taggen ovanför andra DOM-element:

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

Nu ligger script-taggen ovanför DOM-elementen i body-taggen. Den kommer dock fortfarande att ge upphov till felet ”uncaught typeerror: cannot set property” eftersom skriptet laddas före DOM.

För att åtgärda detta fel måste du placera script-taggen precis före den avslutande body-taggen. På så sätt kommer alla DOM-element att laddas före skriptet.

Här är ett exempel på korrekt placering:

<!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'

När koden ovan utförs kommer elementet h1 att ha textContent inställt på ”Detta är en rubrik”. Det kommer därför inte att uppstå något fel.

Stavfel

Stavfel är en annan källa till felet ”uncaught typeerror: cannot set property”.

När du stavar fel på attributet (ID eller klass) som används för att identifiera ett DOM-element i JavaScript hänvisar du till ett element som inte existerar. Som ett resultat kommer du att få tillbaka ett null-värde.

Om du försöker att tilldela ett värde till ett null-värde uppstår felet ”uncaught typeerror: cannot set property”.

Här är ett kod-exempel för att hjälpa dig att förstå:

<!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')

I koden ovan har vi en h1-tagg med en id av heading.

I JavaScript-koden hänvisade vi till id men med ett stavfel. I stället för ”heading” skrev vi ”headin” – det vill säga document.getElementById('headin'); i stället för document.getElementById('heading');.

För att undvika sådana här fel bör du alltid se till att dina DOM-element refereras till på rätt sätt. Detta kan exempelvis uppnås genom användning av rätt attribut med rätt stavning.

Åtkomst till ett odefinierat DOM-element

I förra avsnittet såg vi hur hänvisning till ett felstavat attribut kan ge upphov till felet ”uncaught typeerror: cannot set property”. Samma sak gäller när vi försöker komma åt ett DOM-element som inte finns.

I exemplet nedan försöker vi få tillgång till attributet id som ännu inte har definierats i uppslaget:

<!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')

Som det framgår ovan försöker vi ange textContent för ett DOM-element som inte finns. Det finns inget element i vår HTML-kod som har id av ”heading”. Som ett resultat så returneras ett null-värde.

Om du fortsätter att logga variabeln heading till konsolen får du tillbaka värdet null.

Hur man bestämmer om en variabel är ”null” eller ”odefinierad”

Vid det här laget har du förstått att om du tilldelar ett värde till en variabel som är null eller undefined kommer det troligen att ge upphov till ett ”uncaught typeerror: cannot set property”-fel.

Men du kan avgöra om en variabel är null eller undefined; innan du interagerar med den. Även om detta inte åtgärdar felet ger det exempelvis en viss klarhet om varför en funktionalitet inte fungerar.

Innan vi diskuterar hur man bestämmer om en variabel är null eller undefined i JavaScript är det viktigt att förstå skillnaden mellan ett null-värde och ett undefined-värde.

En variabel är null när ett tomt eller okänt värde tilldelas variabeln. De tidigare avsnitten i den här handledningen visar praktiska exempel på en null-variabel.

Å andra sidan så är en variabel undefined när inget värde har tilldelats den:

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

I koden ovan har variabeln age deklarerats, men inget värde har tilldelats den. Vid loggning till konsolen returnerades undefined.

Nu när du vet skillnaden mellan null och undefined, ska vi titta på hur du kan avgöra om en variabel är någon av dem.

Du kan använda den lösa likhetsoperatorn (==) för att avgöra om en variabel är antingen null eller undefined. Här är ett exempel:

<!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!';
}

I koden ovan gjorde vi ett stavfel när vi hänvisade till ett DOM-element i JavaScript.

Med hjälp av ett if-meddelande kontrollerade vi om värdet av variabeln heading var null: if (heading == null) {...}

Eftersom det returnerade ett null-värde skulle ”Variable is null – cannot assign value to a null variable” loggas ut i konsolen. Om vi inte hade fått ett null-värde skulle koden i blocket else ha utförts.

Undrar du varför vi inte inkluderade undefined i if-anvisningen? Detta beror det på att null == undefined i JavaScript, så koden i if-anvisningen kontrollerar båda felen.

Sammanfattning

Felmeddelanden kan vara förvirrande i vissa fall, men de hjälper utvecklare att ta reda på varför deras kod inte fungerar så att de kan åtgärda den och undvika framtida händelser.

Även om ingen älskar fel så är de ett bra sätt att förstå ditt favoritprogrammeringsspråk bättre.

Att åtgärda ett kodningsfel ger dig dessutom ett bättre sammanhang när du stöter på ett liknande fel i ett annat projekt. Felet som vi har diskuterat i den här artikeln uppkommer inte bara när du arbetar med vanilla JavaScript-projekt. du kan dessutom stöta på detta när du arbetar med JavaScript-ramverk och -bibliotek.

Om du ska bygga en app eller webbplats finns det en mängd olika färdigheter att lära sig. Det krävs dessutom mycket övning för att använda dessa färdigheter på ett effektivt sätt. Kinsta’s nya Hobby Nivå erbjuder den perfekta hosting-plattformen för alla som behöver ett utrymme för att öva. Det gäller allt ifrån spirande nya kodare till erfarna utvecklare som vill marknadsföra sitt arbete eller distribuera proof-of-concept-appar. Och om du registrerar dig för någon nivå idag får du 20 dollar i rabatt på din första månad.