How do I access the var outside the function?

Question

I want to create 2 functions that give me the x,y of something so I can compare those 2 sets of x and y. Below is one of the functions. The second will do the same thing.

I can console.log position.gx and position.gy inside the function, but how do I access it outside the function so I can do something like compare position.gx with position.hx?

I know it's a question of scope but I can't figure out how to re-write this so I can I can compare position.gx with something from another function.

(The problem with being self-taught is I get hung up on the stupidest things.)

function guyLocation() {

var myElement = document.querySelector("#guy");
var xPosition = 0;
var yPosition = 0;

    function getPosition(el) {
        this.addEventListener("load", true);

      while (el) {
        if (el.tagName == "BODY") {

          var xScrollPos = el.scrollLeft || document.documentElement.scrollLeft;
          var yScrollPos = el.scrollTop || document.documentElement.scrollTop;

          xPosition += (el.offsetLeft - xScrollPos + el.clientLeft);
          yPosition += (el.offsetTop - yScrollPos + el.clientTop);
        } else {
          xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
          yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
        }

        el = el.offsetParent;
      }
      return {
        gx: xPosition,
        gy: yPosition
      };
    };

    document.body.onkeydown = function() {
        position = getPosition(myElement);
        console.log(position.gx + ", " + position.gy);
    };
};

Answer 1

You can export the function and set some properties of it. (this is a little funky but should show you how/what it is doing):

NOTE (see the last few lines of this code for the changes)

with this simple markup:

<div id="guy">
  Howdy
</div>

This code:

function guyLocation() {
  var myElement = document.querySelector("#guy");

  var xPosition = 0;
  var yPosition = 0;

  function getPosition(el) {
    //  this.addEventListener("load", true);

    while (el) {
      if (el.tagName == "BODY") {

        var xScrollPos = el.scrollLeft || document.documentElement.scrollLeft;
        var yScrollPos = el.scrollTop || document.documentElement.scrollTop;

        xPosition += (el.offsetLeft - xScrollPos + el.clientLeft);
        yPosition += (el.offsetTop - yScrollPos + el.clientTop);
      } else {
        xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
        yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
      }

      el = el.offsetParent;
    }
    return {
      gx: xPosition,
      gy: yPosition
    };
  };

  document.body.onkeydown = function() {
    guyLocation.position = getPosition(myElement);
    console.log(guyLocation.position.gx + ", " + guyLocation.position.gy);
  };
  guyLocation.getPosition = getPosition;// allows outside calls
};

guyLocation();// sets stuff up, exports function
console.log(guyLocation.position);// undefined
// sets value
guyLocation.position = guyLocation.getPosition(document.querySelector("#guy"));
console.log(guyLocation.position);// Object {gx: 8, gy: 8}

Answer 2

Move the keydown listener outside the function call...

function guyLocation() {

    var myElement = document.querySelector("#guy");
    var xPosition = 0;
    var yPosition = 0;

    // return the parts you want to expose outside the function scope...
    return {
        getPosition: getPosition
    };

    function getPosition(el) {
        this.addEventListener("load", true);

        while (el) {
            if (el.tagName == "BODY") {

                var xScrollPos = el.scrollLeft || document.documentElement.scrollLeft;
                var yScrollPos = el.scrollTop || document.documentElement.scrollTop;

                xPosition += (el.offsetLeft - xScrollPos + el.clientLeft);
                yPosition += (el.offsetTop - yScrollPos + el.clientTop);
            } else {
                xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
                yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
            }

            el = el.offsetParent;
        }
        return {
            gx: xPosition,
            gy: yPosition
        };
    }

}

function dollLocation() {

    // return the parts you want to expose outside the function scope...
    return {
        getPosition: getPosition
    };

    function getPosition(el) {
        // more logic here...
    }

}

// put this part outside the `guyLocation` function
document.body.onkeydown = function() {
    // access different functions, and compare in here...
    guyPosition = getPosition(myElement);
    dollPosition = getPosition(myElement);
    console.log(guyPosition.gx + ", " + guyPosition.gy);
    console.log(dollPosition.gx + ", " + dollPosition.gy);
};

Answer 3

I believe that what you really want to do is take a slightly different approach to solving your problem.

If you create a module -- a block of code that handles movement, you can expose any inner methods that you will need to use elsewhere.

Here is some links that may help

• http://weblogs.asp.net/dwahlin/techniques-strategies-and-patterns-for-structuring-javascript-code-revealing-module-pattern
• https://www.youtube.com/watch?v=HkFlM73G-hk

The video is one in a series that kind of walks you step-by-step how to get to the revealing module pattern.

It will will be kind of strange at first, but it is well worth learning as it is both VERY commonly used in JavaScript and also very powerful.

Answer 4

I don't think there's a question here, declare a variable at the window scope (outside of any code body to access it anywhere). as a designer solution, check out classes (prototypes) and creating an engine object that tracks he position of some object and updates it, store this engine on the window scope and then you can query it from anywhere. you will also have the fundament of creating a more sophisticated game engine (just guessing that's what's going on) where you can create an update loop on a timer and have sprites stored in your engine object, which will manage updating and querying all of that data