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

sistema está repetindo IMC da Tatiana

Bom dia.

Meu código está repetindo o IMC do último paciente já cadastrado, neste caso a Tatiana, independente do peso e altura informados.

Comentei o bloco de código da Tatiana e último paciente ficou sendo o Douglas, mas erro persiste.

Abaixo seguem arquivos, index.html e calculaImc.js . Nesta ordem.

index.html

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Aparecida Nutrição</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/index.css">

    </head>
    <body>

        <header>
            <div class="container">
                <h1 class="titulo">Aparecida Nutrição</h1>
            </div>
        </header>
        <main>
            <section class="container">
                <h2>Meus pacientes</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Peso(kg)</th>
                            <th>Altura(m)</th>
                            <th>Gordura Corporal(%)</th>
                            <th>IMC</th>
                        </tr>
                    </thead>
                    <tbody id="tabela-pacientes">
                        <tr class="paciente" >
                            <td class="info-nome">Tatiana</td>
                            <td class="info-peso">46</td>
                            <td class="info-altura">1.55</td>
                            <td class="info-gordura">19</td>
                            <td class="info-imc">0</td>
                        </tr>
                    </tbody>
                </table>

            </section>
        </main>

        <!-- formulário -->
        <section class="container">
            <h2 id="titulo-form">Adicionar novo paciente</h2>
            <form id="form-adiciona">
                <div class="grupo">
                    <label for="nome">Nome:</label>
                    <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">
                </div>
                <div class="grupo">
                    <label for="peso">Peso:</label>
                    <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
                </div>
                <div class="grupo">
                    <label for="altura">Altura:</label>
                    <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
                </div>
                <div class="grupo">
                    <label for="gordura">% de Gordura:</label>
                    <input id="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
                </div>

                <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
            </form>
        </section>

        <!-- importação de arquivo Javascript -->
        <script src="js/calculaImc.js"></script>
        <script src="js/form.js"></script>
    </body>
</html>

calculaImc.js

var titulo = document.querySelector(".titulo") // função querySelector("") para selecionar elemento via classe
titulo.textContent = "Aparecida Nutricionista" // altera o conteúdo da tag

var pacientes = document.querySelectorAll(".paciente") // função querySelector("") para selecionar elemento via classe


// for() {} para percorrer a lista de pacientes
for(var i = 0; i < pacientes.length; i++) {

    var paciente = pacientes[i]

    // seleção da coluna referente ao peso
    var tdPeso = paciente.querySelector(".info-peso") // dentro do paciente irá buscar o elemento com a classe .info-peso
    var peso = tdPeso.textContent // pega o conteúdo da tag desejada

    // seleção da coluna referente a altura
    var tdAltura = paciente.querySelector(".info-altura") // dentro do paciente irá buscar o elemento com a classe .info-peso
    var altura = tdAltura.textContent // pega o conteúdo da tag desejada

    var tdImc = paciente.querySelector(".info-imc") // dentro do paciente irá buscar o elemento com a classe .info-peso

    //variáveis para uso da validação
    var pesoEhValido = true
    var alturaEhValida = true

    // validação do peso
    if (peso <= 0 || peso >= 450) {
        console.log("Peso inválido!")
        pesoEhValido = false
        tdPeso.textContent = "Peso inválido!"
        tdImc.textContent = "Peso inválido!"
        paciente.classList.add("paciente-invalido") // adiciona a classe ao HTML
    }

    // validação da altura
    if (altura <= 0 || altura >= 3.00) {
        console.log("Altura inválida");
        alturaEhValida = false
        tdAltura.textContent = "Altura inválida"
        tdImc.textContent = "Altura inválida"
        paciente.classList.add("paciente-invalido") // adiciona a classe ao HTML
    }

    // calcula IMC somente se peso e altura são válidos
    if (pesoEhValido && alturaEhValida) {

        /*
        * linha 48, chamando a função calculaImc(peso, altura) e
        * adicinando o resultado na variável imc
        */
        var imc = calculaImc(peso, altura)
        tdImc.textContent = imc // troca o conteúdo da tag pelo resultado do cálculo do IMC
    }
}

// função para calcular IMC do paciente
function calculaImc(peso, altura) {
    var imc = 0;
    imc = peso / (altura * altura)
    return imc.toFixed(2)
2 respostas

Agora segue o código do arquivo form.js .

Testei em outros navegadores após limpar o cache, mas repetição continua.

form.js

var botaoAdicionar = document.querySelector("#adicionar-paciente")
botaoAdicionar.addEventListener("click", function(event) {
    event.preventDefault() // muda o comportamento padrão do navegador

    var form = document.querySelector("#form-adiciona") // seleciona o form
    var nome  = form.nome.value
    var peso = form.peso.value
    var altura = form.altura.value
    var gordura = form.gordura.value


    // criando um elemento no documento
    var pacienteTr = document.createElement("tr")
    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")

    // trocando o valor das TDs por valores digitados pelos usuários
    nomeTd.textContent = nome
    pesoTd.textContent = peso
    alturaTd.textContent = altura
    gorduraTd.textContent = gordura
    imcTd.textContent = imc

    // adicionando as TDs com filhas da TR
    pacienteTr.appendChild(nomeTd)
    pacienteTr.appendChild(pesoTd)
    pacienteTr.appendChild(alturaTd)
    pacienteTr.appendChild(gorduraTd)
    pacienteTr.appendChild(imcTd)


    var tabela = document.querySelector("#tabela-pacientes") // seleciona a tabela

    // adiciona a TR dentro do TBODY
    tabela.appendChild(pacienteTr)
})
solução!

DESCOBRI MEU ERRO.

No arquivo form.js, na linha imcTd.textContent = imc, estou adicionando o conteúdo na coluna IMC o valor da variável imc ao invés de adicionar o valor do imc calculado chamando a função calculaImc(peso, altura), assim imcTd.textContent = calculaImc(peso, altura).

está assim

imcTd.textContent = imc

fiz esta alteração e a repetição parou

imcTd.textContent = calculaImc(peso, altura)

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