Cannot remove eventlistener on Javascript

user_13118970 0
Viewed 30

I have a function like this:

if (localStorage.wsttoc_stat === undefined) { localStorage.wsttoc_stat = "Stop"; }

function ScrollToTop()
{
    var elem = document.querySelector('.elementclass');
    var scroll_height = elem.scrollTop;
    var scroll_offset = elem.offsetTop;

    function gotoTop()
    {
      if(scroll_height > scroll_offset)
      {
        setTimeout(function(){
          elem.scrollTop = scroll_offset;
        }, 1000);
        setTimeout(function(){
          elem.scroll_height = elem.scrollTop;
        }, 2000);
      }
    }

    console.log(localStorage.wsttoc_stat);
    if(localStorage.wsttoc_stat == "Scrolling")
    {

      localStorage.wsttoc_stat = 'Stop';
      console.log(localStorage.wsttoc_stat);
      elem.removeEventListener('scroll', gotoTop);

    } else {

      localStorage.wsttoc_stat = "Scrolling";
      console.log(localStorage.wsttoc_stat);
      elem.addEventListener('scroll', gotoTop);
      gotoTop();
    }
}

document.querySelector('#elementid').addEventListener('click', function(){ ScrollToTop(); });

The function is executed by clicking on a button. It is already running but when I click the button to stop it keeps scrolling.

Please tell me where is the mistake?

dom-events javascript
2 Answers

The reference of gotoTop changed because everytime ScrollToTop is invoked, it creates a new gotoTop function. Thats why removeEventListener does not what you expect. Try changing your code like this:

if (localStorage.wsttoc_stat === undefined) {
    localStorage.wsttoc_stat = "Stop";
}

function gotoTop() {
    var elem = document.querySelector('.elementclass');
    var scroll_height = elem.scrollTop;
    var scroll_offset = elem.offsetTop;
    if (scroll_height > scroll_offset) {
        setTimeout(function() {
            elem.scrollTop = scroll_offset;
        }, 1000);
        setTimeout(function() {
            elem.scroll_height = elem.scrollTop;
        }, 2000);
    }
}

function ScrollToTop() {
    var elem = document.querySelector('.elementclass');
    console.log(localStorage.wsttoc_stat);
    if (localStorage.wsttoc_stat == "Scrolling") {
        localStorage.wsttoc_stat = 'Stop';
        console.log(localStorage.wsttoc_stat);
        elem.removeEventListener('scroll', gotoTop);

    } else {
        localStorage.wsttoc_stat = "Scrolling";
        console.log(localStorage.wsttoc_stat);
        elem.addEventListener('scroll', gotoTop);
        gotoTop();
    }
}

document.querySelector('#elementid').addEventListener('click', function() {
    ScrollToTop();
});
user_27218650

just

document.querySelector('#elementid').addEventListener('click', ScrollToTop);
user_93948050
Related