1
resposta

O misterioso caso do vídeo de 16 minutos que levou 2 horas pra ser assistido.

Então, eu devo estar com a mente cansada pq passei as ultimas horas assistindo o vídeo voltando, pausando, anotando ... Enfim, consegui fazer o código funcionar mas não consegui colocar no formato da tabela igual os outros nomes, os nomes ficam sem formatação nenhuma e um em cima do outro. Aposto que deva ser um detalhe mas minha mente exausta já não consegue achar o erro desse código.

Código do JavaScript:

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 imc = peso / (altura * altura);

    if(peso <= 0 || peso >= 500) {
        imc="Peso inválido!"
        paciente.classList.add("paciente-invalido");
    }

    if(altura <= 0 || altura > 3) {
        imc="Altura inválida!"
        paciente.classList.add("paciente-invalido");
    }

    tdIMC.textContent = imc.toFixed(2);
}

// adcionando comandos ao "clickar" //

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

var form = document.querySelector("#form-adiciona")


function testeFunciona(event) {
    event.preventDefault();
    var nome = form.nome.value
    var peso = form.peso.value
    var altura = form.altura.value
    var gordura = form.gordura.value

    var pacienteTr = document.createElement("tr");

    var pacienteTd = document.createElement("td");
    var nomeTd = document.createElement("tr");
    var pesoTd = document.createElement("tr");
    var alturaTd = document.createElement("tr");
    var gorduraTd = document.createElement("tr");
    var imcTd = document.createElement("tr");

    nomeTd.textContent = nome;
    pesoTd.textContent = peso;
    alturaTd.textContent = altura;
    gorduraTd.textContent = gordura;

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

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

    tabela.appendChild(pacienteTr);
}

botaoAdicionar.addEventListener("click", testeFunciona);

PS: Se precisarem do HTML me avisem pois ao tentar colar acho que excedi o limite de caracteres.

1 resposta

Boa noite Yago, tudo bem? Note que, para cada "campo" do paciente (as Table_datas), você as está criando como document.createElement("tr"); <- "Table-row", basicamente criando uma "linha" da tabela onde deveria estar utilizando o comando pra criar um "Data". Sugiro trocar

var nomeTd = document.createElement("tr");
    var pesoTd = document.createElement("tr");
    var alturaTd = document.createElement("tr");
    var gorduraTd = document.createElement("tr");
    var imcTd = document.createElement("tr");

POR:

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");

Obs: você não precisa criar a var pacienteTd = document.createElement("td"); a linha do PacienteTr já serve como a row onde os "Datas" serão inseridos