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!