Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

JavaScript - addEventListener

por Alberto Vieira Lima
| 319k xp | 27 posts

Olá!

Acabei de finalizar o curso de JavaScript, por sinal ótimo curso.

Hoje estou treinando e usando os exercícios como base. Uma das modificações seria adicionar um botão para remover o item ao invés de dar um duplo clique para remover a linha da tabela.

Exemplo abaixo:

var pacientes = document.querySelector(".paciente");

btnExcluir = document.querySelector("#excluir-paciente");

btnExcluir.addEventListener("click", function(event){
          console.log("Botao clicado");
});

Após carregar a página e ao clicar no primeiro botão é exibido a mensagem no console "Botao clicado" porém para os demais botões isso não ocorre.

Alguém poderia ajudar ?

Desde já TKS!

7 respostas
por LUIZ CARLOS FRANCA RAMOS
| 156.7k xp | 12 posts

você colocou o id para os outros botões no html e depois selecionou eles com o querySelector?

por Mathews Lima
| 305.1k xp | 185 posts
<body>
    <button id="btn01"> Btn - 01 </button>
    <button id="btn02"> Btn - 02 </button>
    <button id="btn03"> Btn - 03 </button>
    <button id="btn04"> Btn - 04 </button>
</body>

Observe que no código acima possui 4 botões, sendo que cada um possui um ID único.

No momento que eu utilizar este trecho de código no JS 

btnExcluir = document.querySelector("#btn01");

btnExcluir.addEventListener("click", function(event){
          console.log("Botao clicado");

Só o primeiro botão irá ter o evento de click, pois eu selecionei através do ID.

por Alberto Vieira Lima
| 319k xp | 27 posts

Adicionando o ID diferente para cada botão funciona, porém queria deixar dinâmico.

Abaixo é um exemplo para remover a linha da tabela e nela não é necessário um ID

var pacientes = document.querySelector(".paciente");

var tabela = document.querySelector("table");

tabela.addEventListener("dblclick", function(event){
    event.target.parentNode.classList.add("fadeOut");

    setTimeout(function(){
                  event.target.parentNode.remove();
                },500);
});

Mesmo seguindo exemplo alterando

DE:
var tabela = document.querySelector("table");

PARA:
var tabela = document.querySelector("button");

Não funciona.

por Alberto Vieira Lima
| 319k xp | 27 posts

Mais alguém ?

por Mathews Lima
| 305.1k xp | 185 posts

Este trecho de código está selecionando uma classe

document.querySelector(".paciente");

Ao contrário do ID, a classe pode repetir em diversas tags HTML.

Não sei como está seu conhecimento em JS, então vou deixar um exemplo bem simples.

HTML

<button class="btn">Hello</button>
<button class="btn">Hello2</button>

JS

var btn = document.getElementsByClassName("btn")

for(var i = 0; i < btn.length; i++) {
    btn[i].addEventListener('click', function() {
            console.log('hello world')
        })
}

Todos os botões que estiverem com a classe btn, terão o evento de click.

por Alberto Vieira Lima
| 319k xp | 27 posts

Mathews Lima , obrigado pelo retorno...

Meu conhecimento em JavaScript é muito pouco... Estou aprimorando com base no curso aqui da Alura.

Para treinar a ideia era fazer um projeto que valide aposta da loteria. Tipo mega-sena, lotofácil... com isso abusar dos recurso que a linguagem permite.

Veja abaixo a tabela:

<table class="table table-striped">
    <thead>
        <tr>
        <th>Tipo</th>
        <th>N° concurso</th>
        <th>Nome</th>
        <th>Qtd acertos</th>
        <th>Dezenas</th>
        <th>Ação</th>
        </tr>
    </thead>
    <tbody id="tabela-participantes">
        <tr class="participante">
        <td class="info-tipo">Mega sena</td>
        <td class="info-concurso">2017</td>
        <td class="info-nome">Alberto</td>
        <td class="info-acertos">3</td>
        <td class="info-dezenas">09-10-12-13-20-51</td>
        <td class="info-acao"><button type="button" class="btn btn-danger"  id="excluir-participante"  value="1">Excluir</button></td>
        </tr>
    </tbody>
</table>

Fiz um teste no com seu script mas sem sucesso. Fiquei quebrando a cabeça e e fiz da seguinte forma:

var buttons = document.querySelectorAll('#excluir-participante');

for (var i = 0; i < buttons.length;i++){
  console.log(buttons[i]);
    buttons[i].addEventListener("click",function(event){
                                                console.log(event);

                                                event.target.parentNode.classList.add("fadeOut");

                                                setTimeout(function(){
                                                              event.target.parentNode.remove();
                                                            },500);

                                         });
}

Com isso consigo pegar o evento de click de cada botão mas ao remover "event.target.parentNode.remove()" não é removido o TR da tabela...

solução!
por Mathews Lima
| 305.1k xp | 185 posts

Você quer algo neste estilo?

HTML

<!DOCTYPE>
<html>

<head>
  <link rel="stylesheet" href="css/bootstrap.css">

  <style>

   .red {
     border: 2px solid red
   }


  </style>

</head>

<body>

    <div class="container">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Tipo</th>
                    <th>N° concurso</th>
                    <th>Nome</th>
                    <th>Qtd acertos</th>
                    <th>Dezenas</th>
                    <th>Ação</th>
                </tr>
            </thead>

            <tbody id="tabela-participantes">
                <tr class="participante">
                    <td class="info-tipo">Mega sena</td>
                    <td class="info-concurso">2017</td>
                    <td class="info-nome">Alberto</td>
                    <td class="info-acertos">3</td>
                    <td class="info-dezenas">09-10-12-13-20-51</td>
                    <td class="info-acao">
                        <button class="btn btn-danger excluir">Excluir</button>
                    </td>
                </tr>

                <tr class="participante">
                    <td class="info-tipo">Quina</td>
                    <td class="info-concurso">2017</td>
                    <td class="info-nome">Mcfly</td>
                    <td class="info-acertos">3</td>
                    <td class="info-dezenas">01-10-02-03-28-05</td>
                    <td class="info-acao">
                        <button class="btn btn-danger excluir">Excluir</button>
                    </td>
                </tr>


                <tr class="participante">
                    <td class="info-tipo">Lotofácil</td>
                    <td class="info-concurso">2017</td>
                    <td class="info-nome">Joseph</td>
                    <td class="info-acertos">10</td>
                    <td class="info-dezenas">09-10-12-13-20-51</td>
                    <td class="info-acao">
                        <button class="btn btn-danger excluir">Excluir</button>
                    </td>
                </tr>


                <tr class="participante">
                    <td class="info-tipo">Lotomania</td>
                    <td class="info-concurso">2017</td>
                    <td class="info-nome">Flor</td>
                    <td class="info-acertos">3</td>
                    <td class="info-dezenas">10-30-25-02-05-51</td>
                    <td class="info-acao">
                        <button class="btn btn-danger excluir">Excluir</button>
                    </td>
                </tr>
            </tbody>

        </table>

    </div>

<script src="js/app.js"></script>
</body>

</html>

JS


var btn = document.getElementsByClassName("btn")

for(var i = 0; i < btn.length; i++) {
    btn[i].addEventListener('click', removeParticipante)


function removeParticipante(e) {

      console.log(e.target)

    e.target.parentNode.parentNode.classList.add('red')
    setTimeout(() => { e.target.parentNode.parentNode.remove(); }, 1500) };
}

OBS: Tentei fazer algo simples para que você consiga entender. Estude sobre delegação de eventos (Event Delegation). Acredito que você irá entender mais sobre o DOM.