calling functions inside functions - Trouble:function not executing

Question

Ok. I want to apologize first because I don not even know how to title this question properly. I will try to explain: I have a working code for this that kind-of-works, but it is a bit messy, so I am trying to divide it into small functions. The whole process is a simulated scrollbar:

-div id="scrollbar" represents the scrollbar track.
-div id="scrollbar"'s only child represents the scrollbar thumb.

Now. Whenever an "onmousedown" event takes place in document.documentElement, function checkAndPerform(e) gets executed. checkAndPerform(e) gets borders of scrollbar and calls the following functions:

-checkClick(e): It checks if click has occurred inside scrollbar and returs true or false.

-perform(): If result of checkClick is true, it moves thumb to click position. Also, it scrolls down the section where the scrollbar operates (section id="ejercicios"). Finally, it adds a "mousemove" EventListener to document.documentElement, with function followMe(e) attached to it. This followMe function calls a function that limits scroll to trackbar borders. After that it perform translation of div and scrolling of section while "mousemove" is active, and finally calls a function release(), that adds a "mouseup" EventListener to remove the followMe function after mouse button gets released.

The idea for the code was got here:

How can I retrieve all mouse coordinates between mousedown to mouseup event, where you can see in accepted answer that function called "trackPoints" gets called troubleless (as it is in my previous code).

So, here it is troubling javascript code:

function getHeight(object) {
    var height = object.getBoundingClientRect().bottom - object.getBoundingClientRect().top;
    return height;
}

function checkClick(e) {
    console.log("x:" + e.pageX, "y:" + e.pageY);
    if (e.pageX > sBLeft - 5 && e.pageX < sBRight + 5 && e.pageY < sBBottom && e.pageY > sBTop) {
        adentroBar = true;
        console.log("meas adentro");
    } else {
        adentroBar = false;
        console.log("meas afuera");
    }
    return adentroBar;
}

function scrollLimited(e) {
    if (e.pageY < sBTop) {
        translateY = 0;
    } else if (e.pageY > sBBottom) {
        translateY = getHeight(scrollBar) - getHeight(thumb);
    } else {
        translateY = e.pageY - sBTop - .5 * getHeight(thumb);
    }
}

function followMe(e) {
    scrollLimited;
    thumb.style.transform = "translate3d(0," + translateY + "px,0)";
    document.getElementById('ejercicios').scrollTop = translateY * ratio;
    document.documentElement.addEventListener("mouseup", release, false);
}

function perform() {
    if (adentroBar === true) {
        translateY = e.pageY - sBTop - getHeight(thumb) / 2;
    }
    thumb.style.transform = "translate3d(0," + translateY + "px,0)";
    document.getElementById('ejercicios').scrollTop = translateY * ratio;
    document.documentElement.addEventListener("mousemove", followMe, false);
}

function release() {
    document.documentElement.removeEventListener("mousemove", followMe, false);
}

function checkAndPerform(e) {
    var translateY, adentroBar, scrollBar = document.getElementById('scrollbar'),
        thumb = scrollBar.getElementsByTagName("div")[0],
        sBLeft = scrollBar.getBoundingClientRect().left,
        sBRight = scrollBar.getBoundingClientRect().right,
        sBTop = scrollBar.getBoundingClientRect().top,
        sBBottom = scrollBar.getBoundingClientRect().bottom,
        preg = document.getElementById('preguntas'),
        ratio = preg.offsetHeight / (getHeight(scrollBar) - getHeight(thumb));
    if (e.which === 1) {
        checkClick;
        perform;
    }
}
document.documentElement.addEventListener("mousedown", checkAndPerform, false);

Also, here it is a jFiddle for it: https://jsfiddle.net/pa0exs4q/ I may provide the working code in case you find it interesting, but as i have said, it is really messy and porly written. Problem is second function in flow (checkClick), is not even being called. I have tried to call it as (checkClick(e)), in that case it runs, but fails to recognize variables defined above in checkAndPerform. In my working code, everything was an only function, so i think it may be a scope problem, but I am open for any ideas.

Nimantha · Accepted Answer · 2021-11-12 07:13:39Z

1

If you have a function named myFunction, you can pass it around simply as myFunction, but to actually call it you have to write it as myFunction(). So this:

function checkAndPerform(e){
  var translateY, adentroBar, scrollBar=document.getElementById('scrollbar'), thumb=scrollBar.getElementsByTagName("div")[0], sBLeft=scrollBar.getBoundingClientRect().left, sBRight=scrollBar.getBoundingClientRect().right, sBTop=scrollBar.getBoundingClientRect().top, sBBottom=scrollBar.getBoundingClientRect().bottom, preg=document.getElementById('preguntas'), ratio=preg.offsetHeight/(getHeight(scrollBar)-getHeight(thumb));    

  if (e.which===1){
    checkClick;
    perform;
  }
}

Should become this:

function checkAndPerform(e){
  var translateY, adentroBar, scrollBar=document.getElementById('scrollbar'), thumb=scrollBar.getElementsByTagName("div")[0], sBLeft=scrollBar.getBoundingClientRect().left, sBRight=scrollBar.getBoundingClientRect().right, sBTop=scrollBar.getBoundingClientRect().top, sBBottom=scrollBar.getBoundingClientRect().bottom, preg=document.getElementById('preguntas'), ratio=preg.offsetHeight/(getHeight(scrollBar)-getHeight(thumb));    

  if (e.which===1){
    checkClick(e);
    perform(e); // make sure to pass e and expect it in perform, otherwise it won't have access to it
  }
}

Without seeing your corresponding markup, this seems to me the most likely and glaring issue in your code.

edited Nov 12, 2021 at 7:13

Nimantha

6,5376 gold badges32 silver badges78 bronze badges

answered Mar 19, 2017 at 17:51

Alexander Nied

13.8k4 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sourcerer Over a year ago

After this i had to learn the difference between "pass" and "call", but as you said, it worked just after passing parameters to each function.. Except one.. :S. For that one i created an object with properties and now its working great! Many thanks!

Collectives™ on Stack Overflow

calling functions inside functions - Trouble:function not executing

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related