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

O IMC não é impresso no TD, como resolvo?

HTML

        <section>
            <h2>Meus pacientes</h2>
            <table>
                <tr>
                    <th>Nome</th>
                    <th>Peso</th>
                    <th>Altura</th>
                    <th>IMC</th>
                </tr>
                <tr>
                    <td class="info-nome">Leonardo</td>
                    <td class="info-peso">50.0</td>
                    <td class="altura">1.60</td>
                    <td class="imc"></td>
                </tr>
                <tr>
                    <td class="info-nome">Paulo</td>
                    <td class="info-peso">100</td>
                    <td class="altura">2.00</td>
                    <td class="imc"></td>
                </tr>
            </table>
            <button id="calcula-imcs" class="botao">Calcular Imcs</button>
        </section>
        <section>
            <h2>Adicionar novo paciente</h2>    
            <form>
                <fieldset>
                    <label for="nome">Nome:</label>
                    <input id="campo-nome" type="text" placeholder="digite o nome do seu paciente">
                </fieldset>
                <fieldset class="campo-medio">
                    <label for="peso">Peso:</label>
                    <input id="campo-peso" type="text" placeholder="digite o peso do seu paciente">
                </fieldset>
                <fieldset class="campo-medio">
                    <label for="altura">Altura:</label>
                    <input id="campo-altura" type="text" placeholder="digite a altura do seu paciente">
                </fieldset>
                <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
            </form>
        </section>

JAVASCRIPT

var trsPacientes = document.getElementsByClassName("paciente");

var posicaoAtual = 0;

while (posicaoAtual <= trsPacientes.length - 1) {
    var pacienteTr = trsPacientes[posicaoAtual];

    var tdNome = pacienteTr.getElementsByClassName("info-nome");
    var tdPeso = pacienteTr.getElementsByClassName("info-peso");
    var tdAltura = pacienteTr.getElementsByClassName("info-altura");

    var paciente = {nome : tdNome.textContent, peso : tdPeso.textContent, altura : tdAltura.textContent};


    if (paciente.altura != 0) {
        var imc = paciente.peso / (paciente.altura * paciente.altura);
        var tdImc = pacienteTr.getElementsByClassName("info-imc");
        tdImc.innerHTML = imc;
        console.log(imc);

    } else {
        console.log("altura precisa ser maior que zero");
    }

    posicaoAtual++;
}
3 respostas
solução!

Boa noite, Ricardo! Tudo bem, cara? =)

Fique atento ao seu código, pois ele contém alguns erros...

Inicialmente, você compreendeu o que a primeira linha do seu JavaScript está fazendo?

var trsPacientes = document.getElementsByClassName("paciente");

Observe que ela é responsável por buscar elementos que possuem a classe paciente... Mas seu HTML não possui nenhum! Logo, a variável trsPacientes está vazia!

Segundo ponto, repare no seguinte trecho do seu while:

var tdNome = pacienteTr.getElementsByClassName("info-nome");
var Peso = pacienteTr.getElementsByClassName("info-peso");
var tdAltura = pacienteTr.getElementsByClassName("info-altura");

Conseguiu ver algum problema nelas? Olhe atentamente para o nome do método que estamos chamando: getElementsByClassName, ou seja, estamos buscando uma coleção, uma lista, um array de elementos. Como sabemos que esse array terá somente uma posição, podemos guardar somente o valor dessa posição, assim:

var tdNome = pacienteTr.getElementsByClassName("info-nome")[0];
var Peso = pacienteTr.getElementsByClassName("info-peso")[0];
var tdAltura = pacienteTr.getElementsByClassName("info-altura")[0];

Da mesma forma, vamos fazer isso com o <td> do IMC, ou seja, vamos mudar de:

var tdImc = pacienteTr.getElementsByClassName("info-imc");

Para:

var tdImc = pacienteTr.getElementsByClassName("info-imc")[0];

Você poderia fazer essas correções em seu código e testar novamente, por favor?

Espero ter ajudado, mas não esqueça de dar um feedback aqui se tudo correu bem ou não. Dessa forma, se algo não estiver correto vamos trabalhando até resolver. =)

Abraço e bons estudos,

Fábio

Muito obrigado pela ajuda Fábio, sua explicação foi super clara e didática. Além de uma velocidade incrível pra responder. Parabéns pelo trabalho de vocês !!!

Ricardo,

Perfeito!! Obrigado pelo feedback! =)

Fábio