Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Erro no console: menu.js:1 Uncaught TypeError: Cannot set property 'onclick' of null at menu.js:1

Referente ao curso Web Design Responsivo: Páginas que se adaptam do mobile ao desk, no capítulo Menu Responsivo e atividade Projeto #2

por Maurício Martins da Silva
| 341.6k xp | 80 posts

Logo ao abrir a página, está dando o seguinte erro no console:

menu.js:1 Uncaught TypeError: Cannot set property 'onclick' of null at menu.js:1

Segue o código javascript:

document.querySelector('.menu-abrir').onclick = function() {
    document.documentElement.classList.add('menu-ativo');
};

document.querySelector('.menu-fechar').onclick = function() {
    document.documentElement.classList.remove('menu-ativo');
};

Estranhamente, os eventos de onclick estão funcionando, pois inspecionando os elementos, a classe menu-ativo é adicionada/removida corretamente, mesmo com o erro no console.

3 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Maurício, tudo bem? Parece que o problema está na hora de atribuir a função ao elementos, normalmente costumo fazer um if verificando se o elemento foi encontrado:

const menuAbrir = document.querySelector('.menu-abrir')
if (menuAbrir) {
    menuAbrir.addEventListener('click', function() {
        document.documentElement.classList.add('menu-ativo');
    })
}

const menuFechar = document.querySelector('.menu-fechar')
if (menuFechar) {
    menuFechar.addEventListener('click', function() {
        document.documentElement.classList.remove('menu-ativo')
    })
}

Porém, estranho que ele funcione, geralmente quando ocorre um erro era para parar a execução do JavaScript.

Espero ter ajudado.

por Maurício Martins da Silva
| 341.6k xp | 80 posts

Na verdade, não existe nenhum problema no código acima, porém o código que você propôs me ajudou a identificar o real problema. Quando eu troquei pelo seu código, apareceu outro erro: de que a variável menuAbrir já estava declarada. Então vi que o arquivo js estava sendo chamado duas vezes no index.html e por isso estava causando o erro.

Trata-se de um erro na atividade 4: Projeto #2 da Aula 05: Menu Responsivo. Nessa aula, o professor propõe a seguinte atividade:

Próximo passo é criar um JavaScript para lidar com o menu. Crie um arquivo menu.js e inclua antes do </body>.


<script src="js/menu.js"></script>

Entretanto a chamada para o menu.js já estava no final do index.html desde o primeiro arquivo do projeto na aula 01.

solução!
por Rafael Durante
| 401k xp | 21 posts
Instrutor Softare Engineer

Maurício,

Tudo joia?

Quase caí nessa também. Não sei o seu caso, mas eu quase coloquei antes do início do <body>, quando na verdade a instrução pede para colocar no fechamento da tag: </body>.

=)