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

Não consigo remover o event listener

Referente ao curso JavaScript: programando na linguagem da web

por fellipe alves filgueiras de souza
| 588.5k xp | 74 posts

Bom dia gente, estou aprendendo javascript e gostaria de saber se alguém poderia me ajudar na seguinte situação:

Fiz uma página bem simples apenas para fins de estudo no javascript, é para a escolha de assentos na sala de cinema, tem vários assentos disponíveis e vários indisponíveis, e a pessoa apenas tem que clicar nos assentos que ela quer obter e depois clicar em finalizar, eu adicionei um listener nos assentos disponíveis para que ao clicar no assento, mude a cor dele para que o usuário veja que ele foi selecionado, quando o usuário clica em finalizar, todos os assentos que ele escolheu se tornam indisponíveis, o problema é que quando o usuário clica em finalizar, o event listener que eu coloquei deveria ser removido, para que ele não consiga clicar no assento que se tornou indisponível, mais não estou conseguindo remover esse listener, dei uma procurada na internet, mais ainda não consigo resolver, alguém poderia me dar uma luz por favor?

Segue o código:

PÁGINA:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Choose your seat</title>

    <link rel="stylesheet" href="css/seating.css">
    <script src="js/seating.js" charset="utf-8"></script>

  </head>
  <body onload="initialize()">

    <section class="seating">

      <h1>Select your seat</h1>

      <img src="" alt="" id="0">
      <img src="" alt="" id="1">
      <img src="" alt="" id="2">
      <img src="" alt="" id="3">
      <img src="" alt="" id="4">
      <img src="" alt="" id="5">
      <img src="" alt="" id="6">
      <img src="" alt="" id="7">
      <img src="" alt="" id="8">
      <img src="" alt="" id="9">

      <br>

      <img src="" alt="" id="10">
      <img src="" alt="" id="11">
      <img src="" alt="" id="12">
      <img src="" alt="" id="13">
      <img src="" alt="" id="14">
      <img src="" alt="" id="15">
      <img src="" alt="" id="16">
      <img src="" alt="" id="17">
      <img src="" alt="" id="18">
      <img src="" alt="" id="19">

      <br>

      <img src="" alt="" id="20">
      <img src="" alt="" id="21">
      <img src="" alt="" id="22">
      <img src="" alt="" id="23">
      <img src="" alt="" id="24">
      <img src="" alt="" id="25">
      <img src="" alt="" id="26">
      <img src="" alt="" id="27">
      <img src="" alt="" id="28">
      <img src="" alt="" id="29">

      <br>

      <button type="button" name="button" onclick="finalize()">Finalize</button>

    </section>

  </body>
</html>

JAVASCRIPT


let conditions = [
  true, false, true, false, true, false, true, false, true, false,
  true, false, true, false, true, false, true, false, true, false,
  true, false, true, false, true, false, true, false, true, false,
];

let choices = [];

function initialize() {
  for (var i = 0; i < conditions.length; i++) {
    setImage(i, conditions[i]);
  }
}

function addListener(id) {
  document.getElementById(id).addEventListener("click", function(){
    document.getElementById(id).src = "img/seat_select.png";
    choices.push(id);
  });
}

function removeListener(id){
  document.getElementById(id).removeEventListener("click", addListener(id));
}

function setImage(id, condition){
  if(condition){
    document.getElementById(id).src = "img/seat_avail.png";
    document.getElementById(id).alt = "Available";
    addListener(id);
  } else {
    document.getElementById(id).src = "img/seat_unavail.png";
    document.getElementById(id).alt = "Unavailable";
  }
}

function finalize(){
  for (var i = 0; i < choices.length; i++) {
    conditions[choices[i]] = false;
    removeListener(choices[i]);
    setImage(choices[i], false);
  }
}
3 respostas
por Rodrigo Torres
| 135k xp | 4 posts
Analisa Desenvolvedor

Você está tentando remover um evento anonimo.

document.getElementById(id).addEventListener("click", function(){
    document.getElementById(id).src = "img/seat_select.png";
    choices.push(id);
  });

Vamos criar uma função, e passar ela para o EventListener.

function myFunction() {
    // Sua função que será chamada pelo EventListener vai aquii...
    document.getElementById(id).src = "img/seat_select.png";
    choices.push(id);
}

function addListener(id) {
    //         Repare que eu estou passando a function 'myFunction' sem o parenteses,
    // pois quando eu passo 'myFunction()', ao inves de passar a função como parametro, estou chamando ela.
    document.getElementById(id).addEventListener("click", myFunction);
}

function removeListener(id){
    document.getElementById(id).removeEventListener("click", myFunction);
}

Caso queira dar uma olhada na documentação: //https://www.w3schools.com/jsref/met_document_removeeventlistener.asp

por fellipe alves filgueiras de souza
| 588.5k xp | 74 posts

Obrigado pelo retorno, consegui agora, fiz da seguinte maneira:

function addListener(id) {
  document.getElementById(id).addEventListener("click", listenerClick);
}

function removeListener(id){
  document.getElementById(id).removeEventListener("click", listenerClick);
}

function listenerClick(){
  this.src = "img/seat_select.png";
  choices.push(this.id);
}

Pelo que entendi, eu não preciso passar o id para a função listenerClick, pois ele já tem uma referência ao elemento que vai ter o listener, então eu só preciso chamar o "this" para alterar as coisas, pensei certo??

solução!
por Rodrigo Torres
| 135k xp | 4 posts
Analisa Desenvolvedor

O motivo de você passar a função listenerClick sem os '()', é que se você colocar listenerClick(), o javascript passará para o EventListener o retorno de listenerClick().