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

Função addEventListener

Quando o botão de adicionar é clicado são adicionados 5 pacientes, além disso quando usei a função addEventListener para "ouvir" o click no titulo da pagina ou em qualquer lugar, no console mostra que foi clicado 5 vezes quando na verdade só dei 1 clique. O código funciona normalmente e os pacientes são adicionados na tabela, só que 5 pacientes com os mesmos dados, ou seja são criados 5 tags "tr"

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 peso = paciente.querySelector(".info-peso").textContent; // peso do paciente paulo

    var altura = paciente.querySelector(".info-altura").textContent; // altura do paciente paulo

    var imc = peso / (altura * altura);

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

    var validadorPeso = true;
    var validadorAltura = true;

    if(peso <= 0 || peso >=1000){
        validadorPeso = false;
        imcpaciente.textContent = "Peso inválido!"
        paciente.classList.add("paciente-invalido");
    }

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

    if(validadorPeso && validadorAltura){
        imcpaciente.textContent = imc.toFixed(2);
    }


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

    botao.addEventListener("click", function(event){
        event.preventDefault();

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

        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 nomeTd = document.createElement("td");
        var pesoTd = document.createElement("td");
        var alturaTd = document.createElement("td");
        var gorduraTd = document.createElement("td");
        var imcTd = document.createElement("td");

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

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

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

    });


}
3 respostas
solução!

Olá André,

Isto está ocorrendo por que o seu bloco :

botao.addEventListener("click", function(event){
    //...
}

Está dentro do seu loop for, quando na verdade ele deveria estar do lado de fora! Isto faz com que 5 listeners sejam adicionados no botão, então toda vez que você clica nele a função de adicionar é executada 5 vezes.

Experimente fechar o bloco for inteiro, e só em seguida colocar o botao.addEventListener.

Oi André,

você precisa fechar o seu for antes de criar a variavel botaoadicionar. Você esta "fechando" o seu for no final do arquivo apenas, esta errado, veja o codigo correto do for:

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

    var paciente = pacientes[i];

    var peso = paciente.querySelector(".info-peso").textContent; // peso do paciente paulo

    var altura = paciente.querySelector(".info-altura").textContent; // altura do paciente paulo

    var imc = peso / (altura * altura);

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

    var validadorPeso = true;
    var validadorAltura = true;

    if(peso <= 0 || peso >=1000){
        validadorPeso = false;
        imcpaciente.textContent = "Peso inválido!"
        paciente.classList.add("paciente-invalido");
    }

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

    if(validadorPeso && validadorAltura){
        imcpaciente.textContent = imc.toFixed(2);
    }
}

Obrigado, era isso mesmo! :)

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