1
resposta

as informações não são adicionadas a tabela

quando eu tento colocar as informações no formulário, a tabela não cria a linha com as informações

// form.js
// 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);
    td.textContent = dado;
    return td;
}
//calcula_imc.js
var titulo = document.querySelector(".titulo");
titulo.textContent = "Aparecida Nutricionista"

var pacientes = document.querySelectorAll(".paciente");

for(var i = 0; i < pacientes.length; i++) {
    var paciente = pacientes[i];

    var tdPeso = paciente.querySelector(".info-peso");
    var peso = tdPeso.textContent;

    var tdAltura = paciente.querySelector(".info-altura");
    var altura = tdAltura.textContent;

    var tdIMC = paciente.querySelector(".info-imc");

    var pesoValido = true;
    var alturaValida = true;

    if (peso <= 0 || peso >= 1000) {
    console.log("Peso inválido");
    pesoValido = false;
    tdIMC.textContent = "Peso inválido";
    paciente.classList.add("paciente-invalido");
    }

    if (altura <= 0 || altura >= 3.00) {
    console.log("Altura inválida");
    alturaValida = false;
    tdIMC.textContent = "Altura inválida";
    paciente.classList.add("paciente-invalido");
    }

    if(alturaValida && pesoValido) {
    var imc = calculaImc(peso, altura);
    tdIMC.textContent = imc;
    }
}

function calculaImc(peso, altura) {
    var imc = 0;
    imc = peso / (altura * altura);
    return Math.round(imc);
}
1 resposta

Boa tarde, Maria! Tudo bem?

Testei seu código aqui e ele funcionou, tem como verificar se você importou esses arquivos .js no index.html?

Onde antes era:

<script src="js/principal.js"></script>

Agora é:

<script src="js/calcula_imc.js"></script>
<script src="js/form.js"></script>

Fico no aguardo!

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