Função não recebe o conteúdo da variável declarada fora dela

HTML

JavaScript

25/07/2021

Olá!
Sou iniciante em programação, incluindo desenvolvimento Web.
Estou tentando desenvolver um formulário de cadastro, porém não estou conseguindo fazer HTML e JavaScript trabalharem juntos.
Nesse caso específico, o JavaScript deveria receber o nome do usuário pelo input no HTML e por meio da função testador exibir este nome, porém quando a variável é declarada fora da função, simplesmente não funciona.
Primeiramente tentei utilizar somente as variáveis, depois tentei usar objetos.
Seguem meus códigos:
HTML
<label for="nome-usuario">
  *Nome:
</label>
<input type="text" id="nome-usuario" name="nome" placeholder="Insira aqui seu nome">
    <br>
    <button type="button" onclick="testador()">
      Testar
    </button>
    <p id="paragrafo"></p>


JavaScript (primeira versão)

let nome=document.getElementById("nome-usuario").value;
function testador() {
  if(nome.length==0){
  document.getElementById("paragrafo").textContent = "Não há nada aqui";
}
if (nome.length != 0) {
  document.getElementById("paragrafo").textContent = "há algo aqui, o nome "+pessoa.nome;
}
}


JavaScript (segunda versão)

pessoa={
        };
        pessoa.nome=document.getElementById("nome-usuario").value;
  function testador() {
  if(pessoa.nome.length==0){
  document.getElementById("paragrafo").textContent = "Não há nada aqui";
}
if (pessoa.nome.length != 0) {
  document.getElementById("paragrafo").textContent = "há algo aqui, o nome "+pessoa.nome;
}
}
Gabriel

Gabriel

Curtidas 1

Melhor post

Gabriel Carvalho

Gabriel Carvalho

16/08/2021

Bom dia meu amigo, tudo bem ?

Acredito que isso possa acontecer, devido ao escopo dessa variável nome, pois foi escolhido usar a palavra reservada "let", para criar a variável nome.

Tente fazer um teste da seguinte forma:

var nome=document.getElementById("nome-usuario").value;


Quando você utiliza a palavra reservada "var" para criar uma variável, essa variável passa a ter um escopo global, ou seja, ela fica visível em qualquer parte do seu código, ou seja, você consegue recuperar o valor dessa variável, de qualquer outra função do seu código.

Segue abaixo também um link, de um artigo que exemplifica melhor o que eu falei:

https://medium.com/weyes/entendendo-o-uso-de-escopo-no-javascript-3669172ca5ba

Espero ter ajudado de alguma forma e caso eu tenho falado alguma bobeira, peço aos mais experientes que sintam-se a vontade para me corrigirem.
GOSTEI 1

Mais Respostas

Victor Carriço

Victor Carriço

25/07/2021

Olá!
Sou iniciante em programação, incluindo desenvolvimento Web.
Estou tentando desenvolver um formulário de cadastro, porém não estou conseguindo fazer HTML e JavaScript trabalharem juntos.
Nesse caso específico, o JavaScript deveria receber o nome do usuário pelo input no HTML e por meio da função testador exibir este nome, porém quando a variável é declarada fora da função, simplesmente não funciona.
Primeiramente tentei utilizar somente as variáveis, depois tentei usar objetos.
Seguem meus códigos:
HTML
<label for="nome-usuario">
*Nome:
</label>
<input type="text" id="nome-usuario" name="nome" placeholder="Insira aqui seu nome">
<br>
<button type="button" onclick="testador()">
Testar
</button>
<p id="paragrafo"></p>

JavaScript (primeira versão)

let nome=document.getElementById("nome-usuario").value;
function testador() {
if(nome.length==0){
document.getElementById("paragrafo").textContent = "Não há nada aqui";
}
if (nome.length != 0) {
document.getElementById("paragrafo").textContent = "há algo aqui, o nome "+pessoa.nome;
}
}

JavaScript (segunda versão)

pessoa={
};
pessoa.nome=document.getElementById("nome-usuario").value;
function testador() {
if(pessoa.nome.length==0){
document.getElementById("paragrafo").textContent = "Não há nada aqui";
}
if (pessoa.nome.length != 0) {
document.getElementById("paragrafo").textContent = "há algo aqui, o nome "+pessoa.nome;
}
}


Olá. Aparentemente você não instanciou a classe pessoa. Tente assim:
Pessoa p = new Pessoa();
p.nome = document.getElementById("nome-usuario").value;
GOSTEI 0
Victor Carriço

Victor Carriço

25/07/2021

Olá!
Sou iniciante em programação, incluindo desenvolvimento Web.
Estou tentando desenvolver um formulário de cadastro, porém não estou conseguindo fazer HTML e JavaScript trabalharem juntos.
Nesse caso específico, o JavaScript deveria receber o nome do usuário pelo input no HTML e por meio da função testador exibir este nome, porém quando a variável é declarada fora da função, simplesmente não funciona.
Primeiramente tentei utilizar somente as variáveis, depois tentei usar objetos.
Seguem meus códigos:
HTML
<label for="nome-usuario">
*Nome:
</label>
<input type="text" id="nome-usuario" name="nome" placeholder="Insira aqui seu nome">
<br>
<button type="button" onclick="testador()">
Testar
</button>
<p id="paragrafo"></p>

JavaScript (primeira versão)

let nome=document.getElementById("nome-usuario").value;
function testador() {
if(nome.length==0){
document.getElementById("paragrafo").textContent = "Não há nada aqui";
}
if (nome.length != 0) {
document.getElementById("paragrafo").textContent = "há algo aqui, o nome "+pessoa.nome;
}
}

JavaScript (segunda versão)

pessoa={
};
pessoa.nome=document.getElementById("nome-usuario").value;
function testador() {
if(pessoa.nome.length==0){
document.getElementById("paragrafo").textContent = "Não há nada aqui";
}
if (pessoa.nome.length != 0) {
document.getElementById("paragrafo").textContent = "há algo aqui, o nome "+pessoa.nome;
}
}



Ou assim:

Pessoa.prototype = new Pessoa();
Pessoa.nome = document.getElementById("nome-usuario").value
GOSTEI 0
Elissandro Anastacio

Elissandro Anastacio

25/07/2021

Você está chamando a função testador() ao clicar no buttom testar do formulário, só o que estiver dentro desta função será executado, no caso o problema está no escopo se você declarar as variáveis que deixou fora dentro da função vai funcionar normalmente.
GOSTEI 0
POSTAR