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

A captura do evento click pirou!

Olá boa noite,

Eu estava com uma dúvida em relação a esse código de capturar o evento click do botão com id "adicionar-paciente" usando addEventListener e deixei para lá por um tempo para continuar o capítulo e o que acontece é que ele está retornando no console exatamente 5 cliques de uma só vez, consequentemente no fim do capítulo, isso me retornou 5 tabelas num clique só (mas que bruxaria é essa?) e no vídeo do instrutor funciona como esperado. Alguém já passou por isso? eu não estou sabendo lidar com esse problema.

Eu refiz esse trecho algumas vezes, mas logo me deparo com o erro quando codifico o código a baixo:

Aqui principal.js http://prntscr.com/iu45n1

botaoAdicionar = document.querySelector("#adicionar-paciente");
    botaoAdicionar.addEventListener("click", function(event){
        event.preventDefault();
        console.log('Fui clicado!!');
    });

Aqui tem o HTML http://prntscr.com/iu45vu

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

Após 1 clique gerou 5 outros cliques http://prntscr.com/iu465g

Após 3 cliques gerou + 5 cliques totalizando 10 http://prntscr.com/iu46ar

Um abraço!

4 respostas

Boa noite, Anderson!

Cola aqui o seu arquivo HTML e o principal.js por completo. Eu darei uma olhada e te ajudo a sair das trevas e acabar com essa bruxaria!

Bom dia Gabriel, segue meu principal.js completo.

Rapaz que bizarro.

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 pesoEhValido = true;
    var alturaEhValida = true;

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

    if (altura <= 0 || altura >= 3.00) {
        console.log("Altura inválida!");
        alturaEhValida = false;
        tdImc.textContent = "Altura inválida";
        paciente.classList.add("paciente-invalido");
    }

    if (pesoEhValido && alturaEhValida) {
        var imc = peso / (altura * altura);
        tdImc.textContent = imc.toFixed(2);
    }

    var botaoAdicionar = document.querySelector("#adicionar-paciente");
    botaoAdicionar.addEventListener("click", function(event){
        event.preventDefault();
        console.log('Fui clicado!!');
    });

}

É aqui que tudo começa a ficar bizarro rs

solução!

Eu já descobri o erro, eu realmente tomei um elixir que me deixava prezo no tempo, coloquei tudo dentro do loop for

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

Que nesse caso estava com contando 5 clicks por vez baseado no tamanho da array das tds.

Isso é o que dá não ler atentamente o que o professor diz:

2- Com o formulário adicionado, vamos começar adicionando um event listener no botão de adicionar ao formulário. Ao final do principal.js, selecione o botão e pendure o listener:

Mas muito obrigado pela atenção Gabriel, me desculpe pelo incomodo.

Boa, Anderson! Eu vi o seu código pelo celular e tinha percebido o problema mas aí não pude responder pq pelo celular ficaria ruim de digitar a resposta.

E não foi incômodo nenhum! Sempre que tiver qualquer dúvida é só mandar pro pessoal aqui!

Grande abraço e bons estudos!