1
resposta

form.js:5 Uncaught ReferenceError: form is not defined at HTMLButtonElement.<anonymous> (form.js:5:46)

Não consigo localizar o erro

var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click", function(event){
    event.preventDefault();
    // Extraindo informacoes do paciente do form
    var paciente = obtemPacienteDoFormulario(form);

    console.log(paciente);

    // cria a tr e td do paciente
    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.value;
    pesoTd.textContent = peso.value;
    alturaTd.textContent = altura.value;
    gorduraTd.textContent = gordura.value;
    console.log(peso.value);
    console.log(altura.value);

    imcTd.textContent = calculaImc(peso.value, altura.value);

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

    // Adicionando o paciente na tabela
    var tabela = document.querySelector("#tabela-pacientes");
    tabela.appendChild(pacienteTr);


});

function obtemPacienteDoFormulario(form){

    var paciente = {
        nome: document.getElementById("nome"),
        peso: document.getElementById("peso"),
        altura: document.getElementById("altura"),
        gordura: document.getElementById("gordura")
    }

    return paciente;

}

titulo.addEventListener("click", function (){
    console.log("fui clicado");
})
1 resposta

Olá Jean, tudo bem com você?

Peço desculpas pela demora em lhe responder.

O erro está sendo apresentado devido ao uso da variável form na função obtemPacienteDoFormulario. No código postado essa variável não foi declarada assim, será levandado erro de referência (Uncaught ReferenceError). Conforme a implementação realizada no código, não ocorre a coleta do formulário e sua declaração na variável form, assim, basta removermos o uso da variável form na função obtemPacienteDoFormulario para que não seja elevado erro de referência.

Além da mudança apresentada acima será necessário realizar outras na função obtemPacienteDoFormulario. No momento que ocorre a declaração das propriedades do objeto paciente, devemos fazer a chamada do atributo value, assim estaremos coletando o valor presente no campo do formulário e realizando a sua atribuição a propriedade do objeto. No código abaixo é apresentado como deverá ficar o código das propriedades.

nome: document.getElementById("nome").value,

Peço que acesse o arquivo js/form.js, localize a declaração e a chamada da função obtemPacienteDoFormulario e remova o atributo form. Nas propriedades do objeto, adicione o uso do atributo value, deixando a função como apresentado abaixo.

Declaração da função

function obtemPacienteDoFormulario() {

    var paciente = {
        nome: document.getElementById("nome").value,
        peso: document.getElementById("peso").value,
        altura: document.getElementById("altura").value,
        gordura: document.getElementById("gordura").value,
    }

    return paciente;

}

Chamada da função

var paciente = obtemPacienteDoFormulario();

Dentro da função do evento click (addEventListener) será necessário substituir a atribuição valores aos campos da tabela (td), para que seja feito o uso do objeto paciente que foi criado com a função obtemPacienteDoFormulario. Assim, peço que no arquivo js/form.js faça a substituição do código a seguir.

Substituta o bloco de código abaixo

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

Por

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

Feita as modificações listadas acima, salve o arquivo js/form.js abra o arquivo index.html no navegador e adicione um novo paciente, verificando o resultado.

Código completo com as mudanças aplicadas

var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click", function (event) {
    event.preventDefault();
    // Extraindo informacoes do paciente do form
    var paciente = obtemPacienteDoFormulario();

    console.log(paciente);

    // cria a tr e td do paciente
    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 = paciente.nome;
    pesoTd.textContent = paciente.peso;
    alturaTd.textContent = paciente.altura;
    gorduraTd.textContent = paciente.gordura;
    imcTd.textContent = calculaImc(paciente.peso, paciente.altura);

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

    // Adicionando o paciente na tabela
    var tabela = document.querySelector("#tabela-pacientes");
    tabela.appendChild(pacienteTr);


});

function obtemPacienteDoFormulario() {

    var paciente = {
        nome: document.getElementById("nome").value,
        peso: document.getElementById("peso").value,
        altura: document.getElementById("altura").value,
        gordura: document.getElementById("gordura").value,
    }

    return paciente;

}


titulo.addEventListener("click", function () {
    console.log("fui clicado");
})

Espero ter ajudado, fico à disposição em caso de dúvidas.

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!