Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

form.js:66 Uncaught TypeError: Cannot read property 'peso' of undefined at validaPaciente (form.js:66)

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Validação de Formulários e atividade Exibindo mensagens de erro

por Sérgio Frederick Santos Damasceno
| 56.5k xp | 27 posts

Não sei oq fazer. Estou tendo muita dificuldade com "Cannot read property 'nome' undefined"

function obtemPacienteDoFormulario(form) {

    var paciente = {
        nome : form.nome.value,
        peso : form.peso.value,
        altura : form.altura.value,
        gordura : form.gordura.value,
        imc : calculaImc(form.peso.value, form.altura.value)
    }

    return paciente;
}

function montaTr(paciente){

    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add("paciente");

    pacienteTr.appendChild(montaTd(paciente.nome, "info-nome"));
    pacienteTr.appendChild(montaTd(paciente.peso, "info-peso"));
    pacienteTr.appendChild(montaTd(paciente.altura, "info-altura"));
    pacienteTr.appendChild(montaTd(paciente.gordura, "info-gordura"))
    pacienteTr.appendChild(montaTd(paciente.imc, "info-imc"));

    return pacienteTr;
}

function montaTd(dado,classe){
    var td = document.createElement("td");
    td.textContent = dado;
    td.classList.add(classe);

    return td;
}

function validaPaciente(paciente){

    if (validaPaciente(paciente.peso)) {
        return true;
    }else{
        return "O peso é inválido";
    }
}
8 respostas
por Giovanna Moeller
| 626.1k xp | 892 posts
Instrutor

Oi Fred, tudo bem?

Esse erro diz que você está tentando acessar a propriedade de algum objeto que está como undefined. Você pode me mandar seu código HTML aqui também, por favor? Assim eu consigo te ajudar melhor! Fico no aguardo!

por Sérgio Frederick Santos Damasceno
| 56.5k xp | 27 posts
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Aparecida Nutrição</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/index.css">

    </head>
    <body>

        <header>
            <div class="container">
                <h1 class="titulo">Aparecida Nutrição</h1>
            </div>
        </header>
        <main>
            <section class="container">
                <h2>Meus pacientes</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Peso(kg)</th>
                            <th>Altura(m)</th>
                            <th>Gordura Corporal(%)</th>
                            <th>IMC</th>
                        </tr>
                    </thead>
                    <tbody id="tabela-pacientes">
                        <tr class="paciente" id="primeiro-paciente">
                            <td class="info-nome">Paulo</td>
                            <td class="info-peso">100</td>
                            <td class="info-altura">2.00</td>
                            <td class="info-gordura">10</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente" id="segundo-paciente" >
                            <td class="info-nome">João</td>
                            <td class="info-peso">80</td>
                            <td class="info-altura">1.72</td>
                            <td class="info-gordura">40</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente" >
                            <td class="info-nome">Erica</td>
                            <td class="info-peso">54</td>
                            <td class="info-altura">1.64</td>
                            <td class="info-gordura">14</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente">
                            <td class="info-nome">Douglas</td>
                            <td class="info-peso">85</td>
                            <td class="info-altura">1.73</td>
                            <td class="info-gordura">24</td>
                            <td class="info-imc">0</td>
                        </tr>
                        <tr class="paciente" >
                            <td class="info-nome">Tatiana</td>
                            <td class="info-peso">46</td>
                            <td class="info-altura">1.55</td>
                            <td class="info-gordura">19</td>
                            <td class="info-imc">0</td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </main>

        <section class="container">
            <h2 id="titulo-form">Adicionar novo paciente</h2>
            <span class="mensagemErro" id="mensagem-erro"></span>
            <form id="form-adiciona">
                <div class="grupo">
                    <label for="nome">Nome:</label>
                    <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">
                </div>
                <div class="grupo">
                    <label for="peso">Peso:</label>
                    <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
                </div>
                <div class="grupo">
                    <label for="altura">Altura:</label>
                    <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
                </div>
                <div class="grupo">
                    <label for="gordura">% de Gordura:</label>
                    <input id="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
                </div>

                <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
            </form>
        </section>

        <script src="js/calcula-imc.js"></script>
        <script src="js/form.js"></script>
    </body>
</html>
por Sérgio Frederick Santos Damasceno
| 56.5k xp | 27 posts

código no git hub

https://github.com/frederick1206/frederick/blob/de9d7b6033b18afedc48dc56274256818d8b7a64/js%20aula%206
por Giovanna Moeller
| 626.1k xp | 892 posts
Instrutor

Oi Fred, bom dia! Desculpa a demora para retornar.

Fui pegar os códigos no github para rodar aqui na minha máquina e conseguir te ajudar, mas o código calcula-IMC.js e form.js são iguais, acredito que houve um erro quando você mandou para o github.

Poderia me mandar novamente o código do form.js? Ou é esse código inteiro que você colocou na pergunta, da 1a vez?

Fico no aguardo da resposta, abraços!

por Sérgio Frederick Santos Damasceno
| 56.5k xp | 27 posts

Desculpa pelo erro

var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click",function(event){
    event.preventDefault();

    var form = document.querySelector("#form-adiciona");

    var paciente = obtemPacienteDoFormulario(form);

    var pacienteTr = montaTr(paciente);

    var erro = validaPaciente(paciente);

    if (erro.length) {
        var mensagemErro = document.querySelector("#mensagem-erro");
        mensagemErro.textContent = erro;
        return;
    }

    var tabela = document.querySelector("#tabela-pacientes");

    tabela.appendChild(pacienteTr);

    form.reset();

});



function obtemPacienteDoFormulario(form) {

    var paciente = {
        nome : form.nome.value,
        peso : form.peso.value,
        altura : form.altura.value,
        gordura : form.gordura.value,
        imc : calculaImc(form.peso.value, form.altura.value)
    }

    return paciente;
}

function montaTr(paciente){

    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add("paciente");

    pacienteTr.appendChild(montaTd(paciente.nome, "info-nome"));
    pacienteTr.appendChild(montaTd(paciente.peso, "info-peso"));
    pacienteTr.appendChild(montaTd(paciente.altura, "info-altura"));
    pacienteTr.appendChild(montaTd(paciente.gordura, "info-gordura"))
    pacienteTr.appendChild(montaTd(paciente.imc, "info-imc"));

    return pacienteTr;
}

function montaTd(dado,classe){
    var td = document.createElement("td");
    td.textContent = dado;
    td.classList.add(classe);

    return td;
}

function validaPaciente(paciente){

    if (validaPaciente(paciente.peso)) {
        return true;
    }else{
        return "O peso é inválido";
    }
}
por Sérgio Frederick Santos Damasceno
| 56.5k xp | 27 posts

O códiogo certo no github

https://github.com/frederick1206/frederick/blob/1529d5a1c8fcd3be6a5c9c346cc11fee694d7f57/js%20aula%206
solução!
por Thiago Sakurai Paschoal
| 699.4k xp | 322 posts

Opa Fred, tudo bem meu brother?

Brow, seguinte baixei seu código aqui e queria entender contigo sobre essa chamada recursiva aqui:

function validaPaciente(paciente){

    if (validaPaciente(paciente.peso)) {
        return true;
    }else{
        return "O peso é inválido";
    }
}

Acredito que este seja o seu problema. Rodei aqui (debugando) e na primeira funciona (paciente não está undefined) mas nas próximas chamadas ele já está undefined. O porque que isso acontece, eu realmente não sei (vou pesquisar).

Tente fazer esse teste. Remova essa recursividade do if. Ficaria dessa forma:

function validaPaciente(paciente){

    if (paciente.peso) {
        return true;
    }else{
        return "O peso é inválido";
    }
}

Neste caso if(paciente.peso) já valida se o valor está ou não undefined

Espero ter ajudado. Um abraço e bons estudos!!! :-)

por Sérgio Frederick Santos Damasceno
| 56.5k xp | 27 posts

Funcionou cara, muito obrigado, mas sabe me dizer oq pq disso?