Som webudvikler kan du ikke undgå at støde på fejl, når du arbejder med JavaScript. Kodningsfejl forhindrer applikationen i at gøre det, der forventes.

For at kunne rette disse fejl skal du være i stand til at forstå fejlmeddelelsen, da dette vil hjælpe dig med at forstå, hvorfor fejlen blev udløst, og hvordan du kan rette den.

I denne vejledning vil vi tale om “uncaught typeerror: cannot set property”-fejlen i JavaScript.

Du lærer hvorfor denne fejl opstår, de forskellige årsager til at du kan støde på den, og de forskellige metoder til at rette den.

Hvad betyder “Uncaught Typeerror: Cannot Set Property” betyder i JavaScript?

En typeerror opstår primært, når du udfører en operation, der involverer inkompatible datatyper. I vores tilfælde er der tale om fejlen “uncaught typeerror: cannot set property”, en JavaScript-fejl, som primært opstår, når du forsøger at tildele en egenskab til et DOM-element med en null -værdi.

Denne fejl kan opstå af forskellige årsager som f.eks:

  • Placering af script tagget i den forkerte position i dit markup
  • Stavefejl, når du henviser til DOM-elementer
  • Adgang til et udefineret eller ugyldigt DOM-element

I de følgende afsnit vil vi diskutere ovenstående årsager, hvordan de kan forårsage fejlen “uncaught typeerror: cannot set property” med kodeeksempler, og hvordan du kan rette fejlen.

Vi vil også tale om, hvordan du kan afgøre, om en variabel er null eller undefined.

Lad os komme i gang!

Sådan retter du “uncaught typeerror: cannot set property” i JavaScript

I dette afsnit får du kendskab til de almindelige årsager til fejlen “uncaught typeerror: cannot set property” i JavaScript. Hvert underafsnit, der følger, er dedikeret til en af disse årsager og dens løsning.

Du får også visualiseret, hvordan du kan rette fejlen med nogle praktiske kodeeksempler.

Ugyldig placering af script Tag

Når en webside indlæses, indlæses den JavaScript-kode, der er skrevet til siden, også. Den måde, som JavaScript genkender Document Object Model (DOM) på, afhænger af, hvor du placerer script -tagget i din kode.

Hvis du placerer script -tagget inden for head -tagget eller over alle HTML-elementer inden for body -tagget, vil scriptet blive udført, før DOM er klar.

Når JavaScript køres, før DOM er klar, får det ikke en fuldstændig repræsentation af DOM – hvilket betyder, at de fleste af dine variabler, der er knyttet til DOM-elementer, returneres som null.

Her er et eksempel på en kode, der ville give anledning til fejlen “uncaught typeerror: cannot set property” i JavaScript på grund af placeringen af script -tagget:

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

I ovenstående kode er script -tagget placeret inden for head -tagget. Vi har også et h1 -element med et id af heading.

Dernæst vil vi forsøge at tildele tekst til h1 -elementet:

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

Selv om ovenstående kode ser fint ud, blev fejlen “uncaught typeerror: cannot set property” udløst. Dette skete, fordi scriptet allerede var indlæst før DOM, så vores JavaScript havde ingen viden om DOM-elementerne.

Denne fejl vil også opstå, hvis du placerer script -tagget over andre DOM-elementer:

<!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 -tagget over DOM-elementerne i body -tagget, men det vil stadig give anledning til fejlen “uncaught typeerror: cannot set property”, fordi scriptet indlæses før DOM.

For at rette denne fejl skal du sætte script -tagget lige før det afsluttende body -tag. På denne måde vil alle DOM-elementer blive indlæst før scriptet.

Her er et eksempel 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 ovenstående kode udføres, vil textContent -elementet h1 få indstillet til “This is a header”. Der vil ikke opstå nogen fejl.

Stavefejl

Stavefejl er en anden kilde til at udløse fejlen “uncaught typeerror: cannot set property”.

Når du staver forkert i den attribut (ID eller klasse), der bruges til at identificere et DOM-element i JavaScript, henviser du til et ikke-eksisterende element, hvilket returnerer en null -værdi.

Hvis du forsøger at tildele en værdi til en null -værdi, opstår fejlen “uncaught typeerror: cannot set property”.

Her er et kodeeksempel til at hjælpe dig med at forstå:

<!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 ovenfor har vi et h1 tag med id på heading.

I JavaScript-koden har vi henvist til id, men med en stavefejl. I stedet for “heading” skrev vi “headin” – dvs. document.getElementById('headin'); i stedet for document.getElementById('heading');.

For at undgå sådanne fejl skal du altid sørge for, at dine DOM-elementer refereres korrekt ved hjælp af den rigtige attribut med den rigtige stavemåde.

Adgang til et udefineret DOM-element

I sidste afsnit så vi, hvordan henvisning til en forkert stavet attribut kan give anledning til en “uncaught typeerror: cannot set property”-fejl. Det samme er tilfældet, når vi forsøger at få adgang til et DOM-element, der ikke eksisterer.

I eksemplet nedenfor forsøger vi at få adgang til en id -attribut, som endnu ikke er defineret i markup’en:

<!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 fremgår ovenfor, forsøger vi at indstille textContent for et DOM-element, der ikke eksisterer. Der er intet element i vores HTML-kode, der har id med “heading”, så dette returnerer en null -værdi.

Hvis du fortsætter med at logge variablen heading til konsollen, får du en værdi på null returneret.

Sådan bestemmer du, om en variabel er “null” eller “undefined”

På dette tidspunkt har du forstået, at tildeling af en værdi til en variabel, der er null eller undefined, højst sandsynligt vil give anledning til en “uncaught typeerror: cannot set property”-fejl.

Men du kan afgøre, om en variabel er null eller undefined; før du interagerer med den. Selv om dette ikke løser fejlen, giver det noget klarhed over, hvorfor en funktionalitet ikke virker.

Før vi diskuterer, hvordan du kan afgøre, om en variabel er null eller undefined i JavaScript, er det vigtigt at forstå forskellen mellem en null – og en undefined -værdi.

En variabel er null, når der er tildelt en tom eller ukendt værdi til variablen. De foregående afsnit i denne vejledning viser praktiske eksempler på en null -variabel.

På den anden side er en variabel undefined, når der ikke er blevet tildelt nogen værdi til den:

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

I ovenstående kode er variablen age erklæret, men der er ikke tildelt den nogen værdi. Ved logning til konsollen blev der returneret undefined.

Nu hvor du kender forskellen mellem null og undefined, skal vi se på, hvordan du kan afgøre, om en variabel er en af dem.

Du kan bruge den løse lighedsoperator (==) til at bestemme, om en variabel er enten null eller undefined. Her er et eksempel:

<!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 ovenfor har vi lavet en stavefejl, da vi henviste til et DOM-element i JavaScript.

Ved hjælp af en if -anvisning kontrollerede vi, om værdien af heading -variablen var null: if (heading == null) {...}

Da den returnerede en null værdi, ville “Variable is null – cannot assign value to a null variable” blive logget ud i konsollen. Hvis vi ikke havde fået en null -værdi, ville koden i else -blokken være blevet udført.

Hvis du undrer dig over, hvorfor vi ikke medtog undefined i if -erklæringen, skyldes det, at null == undefined i JavaScript, så koden i if -erklæringen kontrollerer for begge fejl.

Opsummering

Fejlmeddelelser kan i nogle tilfælde være forvirrende, men de hjælper udviklere med at finde ud af, hvorfor deres kode ikke fungerer, så de kan rette den og undgå fremtidige hændelser.

Selv om ingen elsker fejl, er de en god måde at hjælpe dig med at forstå dit foretrukne programmeringssprog bedre.

Desuden giver det at rette en kodningsfejl dig mere kontekst, når du støder på en lignende fejl i et andet projekt. Den fejl, vi har diskuteret i denne artikel, opstår ikke kun, når du arbejder på vanilla JavaScript-projekter – du kan også støde på den, når du arbejder med JavaScript-frameworks og -biblioteker.

Hvis du skal bygge en app eller 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. Kinstas nye Hobby Tier er den perfekte hostingplatform for alle, der har brug for et sted at øve sig, lige fra spirende nye kodere til erfarne udviklere, der ønsker at reklamere for deres arbejde eller udrulle proof-of-concept-apps. Og hvis du tilmelder dig et hvilket som helst niveau i dag, får du 20 dollars i rabat på din første måned.