Se lavorate nello sviluppo web, vi capiterà di incontrare degli errori quando usate JavaScript. Gli errori del codice impediscono al programma di fare ciò che ci si aspetta.

Per risolvere questi errori, dovrete essere in grado di capire il messaggio di errore, perché questo vi aiuterà prima di tutto a comprendere il motivo dell’errore, e poi a capire come risolverlo.

In questa guida parleremo dell’errore “uncaught typeerror: cannot set property” in JavaScript.

Vedremo insieme perché questo errore si verifica, le diverse ragioni per cui potreste riscontrarlo e i diversi metodi per risolverlo.

Cosa Significa “Uncaught Typeerror: Cannot Set Property” in JavaScript?

Un typeerror si verifica principalmente quando si esegue un’operazione che coinvolge tipi di dati incompatibili. Nel nostro caso, abbiamo a che fare con l’errore “uncaught typeerror: cannot set property”, un errore JavaScript che si verifica principalmente quando cercate di assegnare una proprietà a un elemento DOM con un valore null.

Questo errore può essere generato per diversi motivi, come per esempio:

  • Posizionamento del tag script nella posizione sbagliata del markup.
  • Errori di ortografia quando si fa riferimento a elementi DOM.
  • Accesso a un elemento DOM non definito o non valido.

Nelle sezioni che seguono, discuteremo i motivi di cui sopra, il modo in cui possono generare l’errore “uncaught typeerror: cannot set property” con esempi di codice e vedremo come risolvere l’errore.

Parleremo anche di come determinare se una variabile è null o undefined.

Iniziamo!

Come Risolvere l’Errore “uncaught typeerror: cannot set property” in JavaScript

In questa sezione, scopriremo le cause più comuni dell’errore “uncaught typeerror: cannot set property” in JavaScript. Ogni sottosezione che segue è dedicata a una di queste cause e alla relativa soluzione.

Potrete anche visualizzare come risolvere l’errore con alcuni esempi pratici di codice.

Posizionamento Non Valido del Tag script

Quando una pagina web si carica, viene caricato anche il codice JavaScript scritto per la pagina stessa. Il modo in cui JavaScript riconosce il Document Object Model (DOM) dipende dal posizionamento del tag script nel codice.

Se collocate il tag script all’interno del tag head o sopra tutti gli elementi HTML all’interno del tag body, lo script verrà eseguito prima che il DOM sia pronto.

Quando JavaScript viene eseguito prima che il DOM sia pronto, non riesce a ottenere una rappresentazione completa del DOM, il che significa che la maggior parte delle variabili collegate agli elementi del DOM verranno restituite come null.

Ecco un esempio di codice che solleverebbe l’errore “uncaught typeerror: cannot set property” in JavaScript a causa della posizione del tag script:

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

Il codice qui sopra ha il tag script posizionato all’interno del tag head. Abbiamo anche un elemento h1 con un id di heading.

Successivamente, cercheremo di assegnare del testo all’elemento h1:

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

Sebbene il codice precedente sembri corretto, è stato generato l’errore “uncaught typeerror: cannot set property”. Questo accade perché lo script era già stato caricato prima del DOM, quindi il nostro JavaScript non era a conoscenza degli elementi del DOM.

Questo errore verrà segnalato anche se posizionerete il tag script sopra altri elementi del DOM:

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

Ora il tag script si trova sopra gli elementi del DOM nel tag body, ma continuerà a generare l’errore “uncaught typeerror: cannot set property” perché lo script viene caricato prima del DOM.

Per risolvere questo errore, dovete inserire il tag script subito prima del tag body di chiusura. In questo modo, tutti gli elementi del DOM verranno caricati prima dello script.

Ecco un esempio di posizionamento corretto:

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

Quando il codice qui sopra viene eseguito, l’elemento h1 avrà il suo textContent impostato su “This is a heading”. Non si verificherà alcun errore.

Errori di Ortografia

Gli errori di ortografia sono un’altra fonte di errore “uncaught typeerror: cannot set property”.

Quando si sbaglia a scrivere l’attributo (ID o classe) utilizzato per identificare un elemento DOM in JavaScript, si fa riferimento a un elemento inesistente, il che restituirà un valore null.

Se provate ad assegnare un valore a un null, si verificherà l’errore “uncaught typeerror: cannot set property”.

Ecco un esempio di codice che vi aiuterà a capire meglio:

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

Nel codice qui sopra, abbiamo un tag h1 con un id di heading.

Nel codice JavaScript, abbiamo fatto riferimento al tag id ma con un errore di ortografia. Invece di “heading”, abbiamo scritto “headin”, cioè document.getElementById('headin'); invece di document.getElementById('heading');.

Per evitare errori di questo tipo, verificate sempre che i vostri elementi DOM siano referenziati in modo corretto, utilizzando l’attributo giusto e l’ortografia corrispondente.

Accedere a un Elemento DOM non Definito

Nell’ultima sezione abbiamo visto come il riferimento a un attributo scritto male possa generare un errore di tipo “uncaught typeerror: cannot set property”. Lo stesso accade quando cerchiamo di accedere a un elemento DOM che non esiste.

Nell’esempio che segue, cercheremo di accedere a un attributo id che non è ancora stato definito nel markup:

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

Come si può vedere qui sopra, stiamo cercando di impostare textContent di un elemento DOM che non esiste. Non c’è nessun elemento nel nostro codice HTML che abbia un id di “heading”, quindi questo restituisce un valore null.

Se andate a registrare la variabile heading nella console, otterrete il valore null.

Come Determinare Se una Variabile È ‘null’ o ‘undefined’

A questo punto avrete capito che assegnando un valore a una variabile che è null o undefined molto probabilmente verrà generato un errore del tipo “uncaught typeerror: cannot set property”.

È possibile, però, determinare se una variabile è null o undefined prima di interagire con essa. Anche se questo non risolve l’errore, fornisce una certa chiarezza sul motivo per cui una funzionalità si comporta in modo errato.

Prima di vedere come determinare se una variabile è null o undefined in JavaScript, è importante capire la differenza tra un valore null e un valore undefined.

Una variabile è null quando le viene assegnato un valore vuoto o sconosciuto. Le sezioni precedenti di questo tutorial mostrano esempi pratici di una variabile null.

D’altra parte, una variabile è undefined quando non le è stato assegnato alcun valore:

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

Nel codice qui sopra, la variabile age è stata dichiarata, ma non le è stato assegnato alcun valore. Quando viene registrata nella console, viene restituito undefined.

Ora che abbiamo visto la differenza tra null e undefined, vediamo come determinare se una variabile è una di queste.

Potete usare l’operatore di uguaglianza (==) per determinare se una variabile è null o undefined. Ecco un esempio:

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

Nel codice qui sopra, abbiamo commesso un errore di ortografia nel fare riferimento a un elemento DOM in JavaScript.

Utilizzando un’istruzione if, abbiamo controllato se il valore della variabile heading fosse null: if (heading == null) {...}

Dal momento che ha restituito un valore null, nella console viene visualizzato “Variable is null – cannot assign value to a null variable”. Se non avessimo ottenuto un valore null, sarebbe stato eseguito il codice nel blocco else.

Se vi state chiedendo perché non abbiamo incluso undefined nell’istruzione if, è perché null == undefined in JavaScript, quindi il codice nell’istruzione if controlla entrambi gli errori.

Riepilogo

I messaggi di errore possono confondere in alcuni casi, ma aiutano chi sviluppa a capire perché il loro codice non funziona per poterlo correggere ed evitare che si verifichi in futuro.

Anche se nessuno ama gli errori, sono un buon modo per aiutarvi a comprendere meglio il vostro linguaggio di programmazione preferito.

Inoltre, correggere un errore di codice vi permette di avere un quadro più completo per quando incontrerete un errore simile in un altro progetto. L’errore di cui abbiamo parlato in questo articolo non si presenta solo quando si lavora a progetti JavaScript vanilla: potete incontrarlo anche quando lavorate con framework e librerie JavaScript.

Se volete creare un’applicazione o un sito web, ci sono diverse competenze da imparare e molta pratica da fare per usarle in modo efficiente. Il nuovo Piano Hobby di Kinsta è la piattaforma di hosting perfetta per tutti coloro che hanno bisogno di uno spazio per esercitarsi e che, a prescindere dall’esperienza, vogliono pubblicizzare il proprio lavoro o distribuire dei prototipi di applicazioni. Se vi iscrivete oggi a un qualsiasi piano di Kinsta, riceverete uno sconto di 20 dollari sul vostro primo mese.