ON/OFF Event listener in javascript that toggles an element display

Question

I'm having difficulty to find how to add a removeEventListener(). When i add addEventListener() it worked good but when i added removeEventListner to be able to remove my data on the map it didn't work. (I'm using leaflet)

Here's how i'm doing it:

var geodata ={{{jsonData}}};

var bouto = document.getElementById("bouton");

function jsoncalls(){
    L.geoJSON(geodata,{
    onEachFeature: onEachFeature
}).addTo(mymap);
}

bouto.addEventListener("click", jsoncalls);
bouto.removeEventListener("click", jsoncalls);

Thank you

What exactly are you trying to do here? When you call `removeEventListener` it removes the `click` handler you just added from `addEventListener`. — gen_Eric, Jul 02 '19 at 15:50
Well, you are just removing an event listener, so you won't get any calls to your `jsoncalls` method when your button gets clicked anymore. Look into the library you are using for adding the data if you can remove it as well (feel free to add a tag to it, by using [edit] on your post) — Icepickle, Jul 02 '19 at 15:51
You should edit the question with proper title and make it clearer you want the geoJSON results appear/disappear. This has nothing to do with removing event listeners....!!! — yezzz, Jul 02 '19 at 17:15

jemiloii · Accepted Answer · 2019-07-02T17:37:42.393

3

Looks like your removing the event listener immediately. Try removing it after the event has been called.

var geodata = {{{jsonData}}}; // <- noting this is unusual. guessing its sudo code

var bouto = document.getElementById("bouton");
var displayElement = document.getElementById("display"); // whatever your display data element is

function jsoncalls() {
    // I'm assuming you want to remove it after jsoncall() is called.
    bouto.removeEventListener("click", jsoncalls);
    bouto.addEventListener("click", hideData);

    L.geoJSON(geodata, {
        onEachFeature: onEachFeature
      })
      .addTo(mymap);

    // show your display element here
    displayElement.style.display = "block";
}

function hideData() {
    bouto.removeEventListener("click", hideData);
    bouto.addEventListener("click", jsoncalls);

    // hide your display element here
    displayElement.style.display = "none";
}

bouto.addEventListener("click", jsoncalls);

Here is a updated jsfiddle, it will show elements on odd clicks and hide on even clicks. https://jsfiddle.net/gmbnrx2q/

edited Jul 02 '19 at 17:37

answered Jul 02 '19 at 15:53

jemiloii

24,594
7
54
83

Hi, thank you but it didn't work – Tarek Tarek Jul 02 '19 at 16:02
what browser are you using? – jemiloii Jul 02 '19 at 16:18
Google chrome and i'm using the leaflet library(mapping library). – Tarek Tarek Jul 02 '19 at 16:20
In what way isn't it working? Do you not want to remove the event after it is clicked? – jemiloii Jul 02 '19 at 16:25
Yes i want it to work like a toggle (if we click a first time the data show up and if we click a second time the data disappear and so on (appear/disappear)) – Tarek Tarek Jul 02 '19 at 16:27
sounds like you'll need multiple events. So is this the flow => 1. Click, get new and display the data 2. Click, hide the data 3. Click, get and display new data again 4. Click, hide the data again? – jemiloii Jul 02 '19 at 17:19
yes it's exactly like that – Tarek Tarek Jul 02 '19 at 17:21
Yeah, so that's like a two part question :) Removing the event listener was answered. Now what you want to know is how to show and hide elements. Couple ways of doing it. To be honest. CSS or javascript ways. – jemiloii Jul 02 '19 at 17:26
check out the updated answer, I updated the jsfiddle as well. – jemiloii Jul 02 '19 at 17:38

ON/OFF Event listener in javascript that toggles an element display

1 Answers1