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

25/07/2021

33

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;
}
}
Responder

Post mais votado

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.
Responder

Mais Posts

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;
Responder
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
Responder
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.
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar