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

Erro: Uncaught ReferenceError: form is not defined at HTMLButtonElement.<anonymous>

O código apresenta erro

código HTML

</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" >
                        <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">2.00</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>
        <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/calculaimc.js"></script>
    <script src="js/form.js"></script>

</body>

código do form.js

var botaoAdicionar = document.querySelector("#adicionar-paciente")

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

var paciente = obtemPacienteDoFormulario(form);

var pacienteTr= document.createElement("tr");

var nomeTd= document.createElement("td");
var pesoTd= document.createElement("td");
var alturaTd= document.createElement("td");
var gorduraTd= document.createElement("td");
var imcTd= document.createElement("td");

nomeTd.textContent = nome;
pesoTd.textContent = peso;
alturaTd.textContent = altura;
gorduraTd.textContent = gordura;
imcTd.textContent = calculaImc(peso,altura);

pacienteTr.appendChild(nomeTd);
pacienteTr.appendChild(pesoTd);
pacienteTr.appendChild(alturaTd);
pacienteTr.appendChild(gorduraTd);
pacienteTr.appendChild(imcTd);

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

tabela.appendChild(pacienteTr);

});

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;

}

2 respostas
solução!

Oi Renan.

Tudo bem ?

O erro está na na chamada da sua função obtemPacienteDoFormulario.

Nela você está passando um parâmetro chamado form, porém no código que você colocou aqui, não observei nenhuma declaração da variável.

Você teria que fazer algo assim:

var form = document.querySelector('#form-adiciona');
var paciente = obtemPacienteDoFormulario(form);

Espero te ajudado ai com essa.

Boa sorte ai nos estudos.

Beleza, muito obrigado!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software