Como desenvolvedor web, é inevitável encontrar erros ao trabalhar com JavaScript. Erros de codificação impedem que o programa funcione como esperado.

Para poder corrigir esses erros, você precisa ser capaz de entender a mensagem de erro, pois isso ajudará a compreender por que o erro foi gerado e como corrigi-lo.

Neste tutorial, vamos falar sobre o erro “uncaught typeerror: cannot set property” no JavaScript.

Você aprenderá por que esse erro ocorre, as diferentes razões pelas quais você pode encontrá-lo e os diferentes métodos de correção.

O que significa “Uncaught TypeError: Cannot set property” no JavaScript?

typeerror ocorre principalmente quando você realiza uma operação envolvendo tipos de dados incompatíveis. Em nosso caso, estamos lidando com o erro “uncaught typeerror: cannot set property”, um erro do JavaScript que ocorre principalmente quando você tenta atribuir uma propriedade para um elemento DOM com um valor null.

Este erro pode ocorrer por diferentes razões, por exemplo:

  • Colocando a tag script na posição errada em seu código HTML
  • Erros ortográficos ao referenciar elementos DOM
  • Acessar um elemento DOM indefinido ou inválido

Nas seções a seguir, discutiremos os motivos acima, como eles podem gerar o erro “Uncaught TypeError: Cannot set property” com exemplos de código e como corrigir o erro.

Também falaremos sobre como determinar se uma variável é null ou undefined.

Vamos começar!

Como corrigir o erro “Uncaught TypeError: Cannot set property” no JavaScript

Nesta seção, você aprenderá as causas comuns do erro “Uncaught TypeError: Cannot set property” no JavaScript. Cada subseção a seguir é dedicada a uma dessas causas e sua solução.

Você também poderá visualizar como corrigir o erro com alguns exemplos práticos de código.

Colocação inválida da tag script

Quando uma página web é carregada, o código JavaScript escrito para a página também é carregado. A maneira como o JavaScript reconhece o Modelo de Objeto do Documento (DOM) depende de onde você coloca a tag script em seu código.

Se você colocar a tag script dentro da tag head ou acima de todos os elementos HTML dentro da tag body, então o script será executado antes que o DOM esteja pronto.

Quando o JavaScript é executado antes do DOM estar pronto, ele não consegue obter uma representação completa do DOM – o que significa que a maioria de suas variáveis ligadas aos elementos do DOM retornarão como null.

Aqui está um exemplo de um código que levantaria o erro “uncaught typeerror: cannot set property” no JavaScript devido à posição da 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>

O código acima tem a tag script colocada dentro da tag head. Também temos um elemento h1 com um id de heading.

A seguir, vamos atribuir o texto ao elemento h1:

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

Embora o código acima pareça correto, o erro “uncaught typeerror: cannot set property” foi gerado. Isso ocorreu porque o script já havia sido carregado antes do DOM, então nosso JavaScript não tinha conhecimento dos elementos do DOM.

Esse erro também ocorrerá se você colocar a tag de script acima de outros elementos do DOM:

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

Agora a tag script está acima dos elementos do DOM na tag body, mas ela ainda mostrará o erro “uncaught typeerror: cannot set property” porque o script carrega antes do DOM.

Para corrigir este erro, você tem que colocar a tag script pouco antes da tag body de fechamento. Desta forma, todos os elementos do DOM serão carregados antes do script.

Aqui está um exemplo de colocação correta:

<!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 o código acima for executado, o elemento h1 terá seu textContent definido como “This is a heading”. Não haverá erro.

Erros de digitação

Erros de digitação são outra fonte de erro “uncaught typeerror: cannot set property”.

Quando você digita erroneamente o atributo (ID ou classe) usado para identificar um elemento DOM em JavaScript, você faz referência a um elemento inexistente, que retornará um valor null.

Tentar atribuir um valor a um valor null gerará o erro “uncaught typeerror: cannot set property”.

Aqui está um exemplo de código para ajudar você a entender:

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

No código acima, temos uma tag h1 com um id de heading.

No código JavaScript, fizemos referência ao id mas com um erro ortográfico. Ao invés de “heading”, escrevemos “headin” – ou seja, document.getElementById('headin'); ao invés de document.getElementById('heading');.

Para evitar tais erros, certifique-se sempre de que seus elementos DOM sejam referenciados corretamente, usando o atributo certo com a ortografia correspondente.

Acessando um elemento DOM indefinido

Na última seção, vimos como a referência a um atributo com erros de digitação pode gerar o erro “uncaught typeerror: cannot set property”. O mesmo ocorre quando tentamos acessar um elemento DOM que não existe.

No exemplo abaixo, tentaremos acessar um atributo id que ainda não foi definido no código HTML:

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

Como pode ser visto acima, estamos tentando configurar o textContent de um elemento DOM que não existe. Não há nenhum elemento em nosso código HTML que tenha um id de “heading”, então isso retorna um valor null.

Se você continuar a registrar a variável heading no console, você receberá um valor null retornado.

Como determinar se uma variável é ‘null’ ou ‘undefined’

Até este ponto, você já entendeu que atribuir um valor para uma variável que é null ou undefined provavelmente resultará em um erro “uncaught typeerror: cannot set property”.

No entanto, você pode determinar se uma variável é null ou undefined antes de interagir com elas. Embora isso não resolva o erro, isso fornece clareza sobre por que uma funcionalidade não está funcionando.

Antes de discutirmos como determinar se uma variável é null ou undefined no JavaScript, é importante entender a diferença entre um valor null e um valor undefined.

Uma variável é null quando um valor vazio ou desconhecido é atribuído a uma variável. As seções anteriores deste tutorial mostram exemplos práticos de uma variável null.

Por outro lado, uma variável é undefined quando nenhum valor foi atribuído a ela:

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

No código acima, a variável age foi declarada, mas nenhum valor foi atribuído a ela. Quando logada no console, undefined foi retornada.

Agora que você sabe a diferença entre null e undefined, vamos dar uma olhada em como você pode determinar se uma variável é qualquer uma delas.

Você pode usar o operador de igualdade solto (==) para determinar se uma variável é null ou undefined. Aqui está um exemplo:

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

No código acima, cometemos um erro de digitação ao referenciar um elemento DOM em JavaScript.

Usando uma declaração if, verificamos se o valor da variável heading era null: if (heading == null) {...}

Como ele retornou um valor null, “Variable is null – cannot assign value to a null variable” seria desconectado no console. Se não tivéssemos obtido um valor null, então o código no bloco else teria sido executado.

Se você está se perguntando por que não incluímos undefined na declaração if, é porque null == undefined no JavaScript, então o código na declaração if verifica ambos os erros.

Resumo

As mensagens de erro podem ser confusas em alguns casos, mas elas ajudam os desenvolvedores a descobrir por que seu código não está funcionando para corrigi-lo e evitar ocorrências futuras.

Embora ninguém adore erros, eles são uma boa maneira de ajudá-lo a entender melhor sua linguagem de programação favorita.

Além disso, corrigir um erro de código fornece mais contexto quando você encontra um erro semelhante em um projeto diferente. O erro que discutimos neste artigo não ocorre apenas ao trabalhar em projetos de JavaScript puro – você também pode encontrá-lo ao trabalhar com frameworks e bibliotecas JavaScript.

Se você está construindo um aplicativo ou site, há uma variedade de habilidades para aprender e muita prática necessária para usar essas habilidades de forma eficiente. O novo plano Hobby Tier da Kinsta oferece uma plataforma de hospedagem perfeita para todos que precisam de um espaço para praticar, desde novos programadores até desenvolvedores experientes que desejam divulgar seu trabalho ou implantar aplicativos de prova de conceito. E se você se inscrever em qualquer plano hoje, receberá $20 de desconto no primeiro mês.