Executando verificação de segurança...
2

[JS] Problema ao chamar o objeto

Boa tarde, galera!

Estou fazendo um programa que lê do prompt do navegador um nome e uma idade, usando a função init(), o programa na teoria era pra criar um objeto com esses dois parametros para que eu use eles para inserir no document o nome e a idade q ele digitou na forma de tag <p></p>, segue o programa.

//função q inicia e pede os dados
function init(){
    let name = prompt('Qual seu nome?')
    let age = prompt('Qual sua idade?')

    const usuario = new user(name, age); //criando o objeto
}
//função que cria a estrutura do objeto
var user = function(name, age){
    this.nome = name,
    this.idade = age
}
//inicio do programa
init();
let n = document.getElementById('nome') //id da tag <p> para o nome
let a = document.getElementById('age') //id da tag <p> para idade

//inserindo nas respectivas tags
n.innerText = user.nome
a.innerText = user.idade

Ele escreve no document "undefined", tanto para o nome quanto para idade. Segue o HTML:

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>taiane2</title>
</head>
<body>
    <p id="nome"></p>
    <p id="age"></p>
    <script src="script.js"></script>
</body>
</html>

Carregando publicação patrocinada...
3

Olá Pedro,

Para que voce consiga fazer isso, voce deve retornar a variável local que está dentro da função com o return. E quando chamar a função voce deve colocar o valor retornado dentro de uma variávelPara que voce consiga fazer isso, voce deve retornar a variável local que está dentro da função com o return. E quando chamar a função voce deve colocar o valor retornado dentro de uma variável.

Deste modo:

//função q inicia e pede os dados
function init(){
    let name = prompt('Qual seu nome?')
    let age = prompt('Qual sua idade?')

    const usuario = new user(name, age); //criando o objeto
    return usuario
}
//função que cria a estrutura do objeto
var user = function(name, age){
    this.nome = name,
    this.idade = age
}
//inicio do programa
var retorno = init()
let n = document.getElementById('nome') //id da tag <p> para o nome
let a = document.getElementById('age') //id da tag <p> para idade

//inserindo nas respectivas tags
n.innerText = retorno.nome
a.innerText = retorno.idade

Recomendo estudar sobre os tipos das variáveis, sendo elas var, let e const, tem na documentação oficial do javascript, mas o Felipe Deschamps postou um vídeo manerinha, aqui tá o link Eu quero saber se você conhece responder essas 3 perguntas de Javascript!

Talvez seja necessário olhar mais de uma vez, eu por exemplo quando comecei vi este mesmo vídeo, entendi um pouco e segui estudando outras coisas, depois de uns 6 meses eu vi de novo e entendi completamente.

Lembre-se de sempre voltar nos conteúdos que não ficaram bem fixados.

Boa Sorte aí

1

Fala fera, não sou "o cara" pra te ajudar com isso... mas aqui vai meus dois centavos de contribuição pra te ajudar no rolê:

Talvez vc esteja acessando as propriedades "nome" e "idade" do seu objeto "user" como se fosse uma variável global... mas será q é mesmo?

De repente, armazenar a instância criada da função "user" em uma variável e acessar as propriedades através dela pode ser uma boa.

Além disso, seria legal colocar o "onload" pra rodar no código, de modo que seu script garanta que as operações de acesso ao DOM sejam executadas só depois que a página foi carregada, pra evitar dor de kbça. Dá uma olhada, testa e manda aqui o "fii de beck"

        let usuario;
        function init(){
            let name = prompt('Qual seu nome?')
            let age = prompt('Qual sua idade?')

            usuario = new user(name, age);
        }
        var user = function(name, age){
            this.nome = name,
            this.idade = age
        }
        init();
        window.onload = function(){
            let n = document.getElementById('nome')
            let a = document.getElementById('age')
            n.innerText = usuario.nome
            a.innerText = usuario.idade
        }
1

Primeiro eu fiz algumas alterações no código, achei melhor criar a estrutura do objeto com uma classe já que ela é feita pra isso, a pesar de JS aceitar basicamente tudo como função.

Movi pra dentro da função init a comunicação com a DOM, instanciei a variavel usuario fora, caso você precise utilizar ela em outras partes o projeto.

    <script>
        let n = document.getElementById('nome');
        let a = document.getElementById('age');
        let usuario;
       
        function init() {
            let name = prompt('Qual seu nome?')
            let age = prompt('Qual sua idade?')

            usuario = new User(name, age);
            n.innerText = usuario.name
            a.innerText = usuario.age

        }

        class User{
            constructor(name, age){
                this.name = name;
                this.age = age;
            }
        }

        init();
    </script>
1

Você está tentando pegar o valor da função user antes de instanciar ela.

Perceba que você instanciou o user nesse momento:
const usuario = new user(name, age); //criando o objeto

A partir daí o usuario será um objeto do tipo user que terá o name e age que você adquiriu quando fez os prompts.

Então você deve pegar os dados do usuario logo após o instanciar.

A seguir editei o seu programa, passei a lógica de pegar o elemento por ID e atribuir o innerText de cada para dentro da função init() e fiz o ajuste pra pegar os dados do usuario instanciado.

//função q inicia e pede os dados
function init(){
    let name = prompt('Qual seu nome?')
    let age = prompt('Qual sua idade?')

    const usuario = new user(name, age); //criando o objeto
    
    //pegando a referência dos elementos na página
    let n = document.getElementById('nome') //id da tag <p> para o nome
    let a = document.getElementById('age') //id da tag <p> para idade
    
    //inserindo nas respectivas tags
    n.innerText = usuario.nome
    a.innerText = usuario.idade
}

//função que cria a estrutura do objeto
var user = function(name, age){
    this.nome = name,
    this.idade = age
}

//inicio do programa
init();