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

Erro Uncaught TypeError: Cannot read property 'value' of null

Referente ao curso JavaScript: programando na linguagem da web

por Jucileia Santos Silva
| 160k xp | 14 posts

Boa Tarde, Estou fazendo exercícios para aprender um pouco mais e estou com problema para conseguir pegar o que o usuário digitou em um input.

Aparece esse erro: Erro Uncaught TypeError: Cannot read property 'value' of null 

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title> Exercícios JavaScript</title>
</head>
<body>

    <h4> Digite seu Nome: </h4>
    <input type="text" id="nomeUsuario">
    <button id="mostraNome" type="submit"> Mostrar Nome </button>




<style>
    body{
        height: 800px;
        width: 800px;
        background-color: aquamarine;
    }

</style>

<!-- <script src="js/exercicio-1.js"></script> -->
<!-- <script src="js/exercicio-2.js"></script> -->
<!-- <script src="js/exercicio-3.js"></script> -->
<!-- <script src="js/exercicio-4.js"></script> -->
<script src="js/exercicio-5.js"></script>
</body>
</html>

Código do JavaScript 

var botaoEnviar = document.querySelector("#mostraNome");
var nomePessoa = document.getElementById("#nomeUsuario").value;


botaoEnviar.addEventListener("click", function(event){
    event.preventDefault(); 

    console.log("fui clicado");
    console.log(nomePessoa);
});
4 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Jucileia, tudo bem? O problema está na hora de buscar o input no DOM, vamos ver sua busca:

var nomePessoa = document.getElementById("#nomeUsuario").value;

Repare que você está usando a função getElementById, nesse caso não precisa informar o # a função sabe que você já está buscando por um id, poderia mudar para:

var nomePessoa = document.getElementById("nomeUsuario").value;

Ou pode usar o querySelector e passar o #:

var nomePessoa = document.querySelector("nomeUsuario").value;

Uma das duas mudanças deve resolver o problema.

Espero ter ajudado.

por Jucileia Santos Silva
| 160k xp | 14 posts

Oi, boa tarde. Agora não aparece mais o erro, só que ele volta vazio, sem o nome digitado. 

var botaoEnviar = document.querySelector("#mostraNome");
var nomePessoa = document.querySelector("#nomeUsuario").value;


botaoEnviar.addEventListener("click", function(event){

    console.log("fui clicado");
    console.log(nomePessoa);
});
solução!
por Jucileia Santos Silva
| 160k xp | 14 posts

Fechando o tópico pois já consegui resolver o problema, obrigado pela ajuda! 

var botaoEnviar = document.querySelector("#mostraNome");

botaoEnviar.addEventListener("click", function(event){
    mostraNome();
})


function mostraNome() { 
    event.preventDefault();
    var nomePessoa = document.querySelector("#nomeUsuario").value;
    console.log(nomePessoa);
}
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Magina Jucileie, fico feliz que tenha resolvido o problema.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.