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

Os dados do formulário não vão para a tabela

Olá! As informações que escrevo no formulário não aparecem na tabela. No console não aparece nenhum erro e comparando o código do professor, não vejo uma diferença que causaria o erro.

// adicionar mais paciente quando clica no botão
var botaoAdicionar = document.querySelector ("#adicionar-paciente");

botaoAdicionar.addEventListener("click", function(event) {
  //para o formulario não carregar direto
  event.preventDefault();

  //valores que estão no formalario 
  var formulario = document.querySelector ("#form-adiciona");
  var paciente = obterPacientedoFormulario(formulario);

  //criar o html pelo JS
  var adicionarPaciente = criaTr (paciente);

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

    formulario.reset ();
});

function obterPacientedoFormulario (formulario) {
  var paciente = {
    nome: formulario.nome.value,
    peso: formulario.peso.value,
    altura: formulario.altura.value,
    gordura: formulario.gordura.value,
    imc: calculaImc (formulario.peso.value, formulario.altura.value)
  }
  return paciente;
}

function criaTr (paciente) {
  var adicionarPaciente = document.createElement ("tr");
  adicionarPaciente.classList.add ("paciente");

  // colocar o td's dentro do tr 
  adicionarPaciente.appendChild (criaTd (paciente.nome, "info-nome"));
  adicionarPaciente.appendChild (criaTd (paciente.peso, "info-peso"));
  adicionarPaciente.appendChild (criaTd (paciente.altura, "info-altura"));
  adicionarPaciente.appendChild (criaTd (paciente.gordura, "info-gordura"));
  adicionarPaciente.appendChild (criaTd (paciente.imc, "info-imc"));

  return adicionarPaciente;
}

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

  return td;
}

foto do resuldado do meu código

2 respostas
solução!

Oi Diana, tudo bem?

Aparentemente o problema está na função criaTd, veja como está o código abaixo:

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

Porém, esse textContent é uma propriedade de algum elemento HTML, e do jeito que você está fazendo ele está solto no código, não está junto com nenhum elemento HTML, e ele deveria ser uma propriedade do td na verdade, então deveria ser assim:

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

Agora deve funcionar como o esperado! Espero ter ajudado, bons estudos =)

Muito obrigada Giovanna