Why Event Listener not getting applied to the inside function?-CodePudding

I have some functions where one function has resize event listener and inside that function there is another function. But as the outer function has resize on it, I am hoping the inner function will be also called on resize event. But the inner function not working on resize. What is the problem here?

JAVASCRIPT

function chekon() {
  document.addEventListener('DOMContentLoaded', upme);
  window.addEventListener('resize', upme);

  function upme() {
    var rome = document.getElementById("out-cmnt");
    var rect = rome.getBoundingClientRect();
    var poss = rect.top   window.scrollY;
    var iwwr = window.innerWidth;
    var koss = rect.bottom   window.scrollY;
    var loss = koss - poss;

    window.addEventListener('scroll', doso, false);

    function doso() {
      lopp = document.getElementById("Web_1920__1");
      hope = lopp.clientHeight;
      const meme = document.body.scrollHeight;
      const keke = hope / meme;
      const scsc = window.scrollY;
      var scmx = (document.documentElement.scrollHeight - document.documentElement.clientHeight);
      var innr = window.innerHeight;
      console.log("innr inner-height = ", innr);
    }
  }
}
chekon();

So here why the resize event listener not getting applied to the inner doso function on window resize? The doso function is inside the upme function. Do I need to apply resize event listener on both the functions even though the doso function is inside upme.

CodePudding user response：

The problem is that the window.addEventListener('scroll', doso, false); inside the upme function is only being executed once, when the upme function is first called. On subsequent calls to upme, the window.addEventListener('scroll', doso, false); line will not be executed again, and the doso function will not be registered as a scroll event listener. To make the doso function be called on each resize event, you need to move window.addEventListener('scroll', doso, false); outside of the upme function, so it can be executed each time upme is called.

CodePudding user response：

The problem is that you are adding the "scroll" event listener inside the "upme" function. This means that the "doso" function will only be registered as a "scroll" event listener once when the "upme" function is first called.

To resolve this issue, you should move the "scroll" event listener outside the "upme" function so that it will be registered every time the "upme" function is called, including when it's called as a result of a "resize" event.

Here's a corrected version of your code:

function chekon() {


  document.addEventListener('DOMContentLoaded', upme);
  window.addEventListener('resize', upme);
  window.addEventListener('scroll', doso, false);

  function upme() {
    var rome = document.getElementById("out-cmnt");
    var rect = rome.getBoundingClientRect();
    var poss = rect.top   window.scrollY;
    var iwwr = window.innerWidth;
    var koss = rect.bottom   window.scrollY;
    var loss = koss - poss;
  }

  function doso() {
    lopp = document.getElementById("Web_1920__1");
    hope = lopp.clientHeight;
    const meme = document.body.scrollHeight;
    const keke = hope / meme;
    const scsc = window.scrollY;
    var scmx = (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    var innr = window.innerHeight;
    console.log("innr inner-height = ", innr);
  }
}
chekon();