JQuery Prototype-based scope resolution throw NaN error

Question

Trying to pass numeric values from one function to another (values tested to be numeric) but when I access said values from another function I'm given an "NaN" error. Tried following example 6 (Advanced) from this SO What is the scope of variables in JavaScript? but it is not working for me.

How do I fix this?

    //global var accessed in other functions
    var institution1Left;
    var institution2Left;
    var institution3Left;
    var authorityLeft;
    var inst1Left;
    var inst2Left;
    var inst3Left;
    var authLeft;

 function getOffset(el) {
        var _x = 0;
        var _y = 0;
        while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
            _x += el.offsetLeft - el.scrollLeft;
            _y += el.offsetTop - el.scrollTop;
            el = el.offsetParent;
        }
        return { top: _y, left: _x };
    }

$(document).ready(function () {
        calculateNode();
    });

    //val set here
    function calculateNode() {
        this.institution1Left = getOffset(document.getElementById('institution1')).left;
        this.institution2Left = getOffset(document.getElementById('institution2')).left;
        this.institution3Left = getOffset(document.getElementById('institution3')).left;
        this.authorityLeft = getOffset(document.getElementById('authority')).left;

        //change node Left positioning
        this.inst1Left = institution1Left - 26;
        this.inst2Left = institution2Left - 26;
        this.inst3Left = institution3Left - 27;
        this.authLeft = authorityLeft - 27;
    }

    function displayCipherIn1() {
    //getting NaN error here
         alert(
        new calculateNode().inst1Left+
        new calculateNode().inst2Left+
        new calculateNode().inst3Left+
        new calculateNode().authLeft)
    }

What is the logic of `getOffset()` and what does it return? Also note that, despite the title, none of your code has anything to do with jQuery nor is it prototype-based. — Rory McCrossan, Jun 28 '19 at 10:01
Hi it is just to determine the position of HTML objects on my page — user3803747, Jun 28 '19 at 10:02
Note that `this.institution1Left` and `institution1Left` are not the same variable when referenced inside your `calculateNode()` function. As such, this may be what you're looking for: https://jsfiddle.net/9m5k3dnb/. You may be better describing the problem you're trying to solve here, though, as the logic seems needlessly convoluted and can be DRY'd up. — Rory McCrossan, Jun 28 '19 at 10:11
Sure I'm trying to obtain the position of several objects with calculateNode() that I will use in other functions. From my debugging it's confirmed that the values in calculateNode are numeric (i.e. 314, 297) but once outside (after assigning global var inst1Left for example) said global var is found to not be numeric — user3803747, Jun 28 '19 at 10:12

score 0 · Answer 1 · answered Jun 28 '19 at 10:02

Since they're meant to be numbers, you should probably initialize them to be 0 - undefined mathematical operations is most likely where your NaN is coming from. You should also use a simpler variable declaration syntax:

var institution1Left = institution2Left = institution3Left = authorityLeft = inst1Left = inst2Left = inst3Left = authLeft = 0;

score 0 · Answer 2 · answered Jun 28 '19 at 10:15

Problem is in your calculateNode() function. You are not using this pointer when changing left position. Try the following change:

function calculateNode() {
    this.institution1Left = getOffset(document.getElementById('institution1')).left;
    this.institution2Left = getOffset(document.getElementById('institution2')).left;
    this.institution3Left = getOffset(document.getElementById('institution3')).left;
    this.authorityLeft = getOffset(document.getElementById('authority')).left;

    //change node Left positioning
    this.inst1Left = this.institution1Left - 26;
    this.inst2Left = this.institution2Left - 26;
    this.inst3Left = this.institution3Left - 27;
    this.authLeft = this.authorityLeft - 27;
}

JQuery Prototype-based scope resolution throw NaN error

2 Answers2