2
respostas

Projeto não enxerga calcula-imc.js

Colegas:

Estou na lição "Validando os dados do formulário", e mesmo após o preenchimento de todas as linhas de código necessárias para a execução das críticas em "js\calcula-imc.js" percebo que aparentemente elas não são executadas quando preencho os dados do formulário.

Segue abaixo o trecho do index.html onde invoco o "js\calcula-imc.js"

    <script src="js/calcula-imc.js"></script>
    <script src="js/form.js"></script>

Segue abaixo o conteudo de js\calcula-imc.js

var titulo = document.querySelector(".titulo");
titulo.textContent = "APARECIDA NUTRICIONISTA";

var paciente = document.querySelector("#primeiro-paciente");

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

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

  var tdAltura = paciente.querySelector(".info-altura");
  var tdPeso = paciente.querySelector(".info-peso");
  var tdImc = paciente.querySelector(".info-imc");


  var altura = tdAltura.textContent;
  var peso = tdPeso.textContent;

  var pesoEhValido = validaPeso(peso);
  var alturaEhValida = validaAltura(altura);


  if (!pesoEhValido) {
      console.log("Peso inválido!");
      tdPeso.textContent = "Peso inválido!";
      pesoEhValido = false;
      paciente.classList.add("paciente-invalido");
  }

  if (!alturaEhValida) {
      console.log("Altura inválida!");
      tdAltura.textContent = "Altura inválida!";
      alturaEhValida = false;
      paciente.classList.add("paciente-invalido");
  }

  if (alturaEhValida && pesoEhValido) {
      var imc = calculaImc(peso,altura);
      tdImc.textContent = imc;
  } else {
      tdImc.textContent = "Altura e/ou peso inválidos!"
  }

function validaPeso(peso) {
  if (peso >= 0 && peso < 1000) {
    return true;
  } else {
    return false;
  }
}

function validaAltura(altura) {
  if (altura >=0 && altura <= 3.00) {
    return true;
  } else {
    return false;
  }
}

function calculaImc(peso, altura) {
  var imc = 0;
  imc = peso / (altura * altura);
  return imc.toFixed(2);
}

}

Segue abaixo o código-fonte de form.js

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

  var pacienteTr = montaTr(paciente);

  if (validaPaciente(paciente)) {
    console.log("Paciente invalido");
    return;
  }

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

  form.reset();

})

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;
}

function montaTr(paciente) {
  var pacienteTr = document.createElement("tr");
  pacienteTr.classList.add("paciente");

  pacienteTr.appendChild(montaTd(paciente.nome, "info-nome"));
  pacienteTr.appendChild(montaTd(paciente.peso, "info-peso"));
  pacienteTr.appendChild(montaTd(paciente.altura, "info-altura"));
  pacienteTr.appendChild(montaTd(paciente.gordura, "info-gordura"));
  pacienteTr.appendChild(montaTd(paciente.icm, "info-icm"));

  return pacienteTr;

}

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

function  validaPaciente(paciente) {
  if (validaPeso(paciente.peso)) {
    return true;
  } else {
    return false;
  }
}
2 respostas

Olá Claúdio, tudo bem?

Eu testei o seu código está tudo ok. Até coloquei alguns console.log para ver se realmente estava fubncionando.

Um deles foi para exibir o tdImc antes do loop.

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

// Verifica conteúdo do elemento com a classe 'info-imc' do paciente com id "#primeiro-paciente"
console.log(paciente.querySelector('.info-imc').textContent);
for (var i = 0; i < pacientes.length; i++) {
  var paciente = pacientes[i]
  var tdAltura = paciente.querySelector(".info-altura");
  var tdPeso = paciente.querySelector(".info-peso");
  var tdImc = paciente.querySelector(".info-imc");

E abri o inspecionar na aba de console para ver o que ele retorna: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Você pode fazer um teste logo depois da função de calculaImc , fazendo um log do tdImc, para ver o que ele retorna.

Ah, e um ponto de atenção na função montaTr. Vê o seu código e tenta encontrar o que pode está atrapalhando essa função de funcionar.

function montaTr(paciente) {
  var pacienteTr = document.createElement("tr");
  pacienteTr.classList.add("paciente");

  pacienteTr.appendChild(montaTd(paciente.nome, "info-nome"));
  pacienteTr.appendChild(montaTd(paciente.peso, "info-peso"));
  pacienteTr.appendChild(montaTd(paciente.altura, "info-altura"));
  pacienteTr.appendChild(montaTd(paciente.gordura, "info-gordura"));
  pacienteTr.appendChild(montaTd(paciente.icm, "info-icm"));

  return pacienteTr;

}

Espero ter te ajudado, Claúdio.

Bosn estudos.

Ajudou muito, amigão! Vou fazer uma revisão a partir das suas observações! VALEU!