Call from dynamicly created child constructor function to parent constructur

Question

Update: I updated the code from a answer and it's working now. Thanks to @Azamantes

I try to call the parent object/constructor.

HTML Code:

<div style="width:50px; height: 50px; display: inline-block; background-color:red;" id="id0">BoxId0</div>
<div style="width:50px; height: 50px; display: inline-block; background-color:red;" id="id1">BoxId1</div>
<div style="width:50px; height: 50px; display: inline-block; background-color:red;" id="id2">BoxId2</div>
<div style="width:50px; height: 50px; display: inline-block; background-color:red;" id="id3">BoxId3</div>

Javascript Code:

    function Child(parent, childID) {
            var thisReference = this;
            var parentReference = parent;

            $(childID).on("click", function() {
                parentReference.childCallMe(childID); // Gave on click 'TypeError: parentReference.childCallMe is not a function'
            });

            return {
                getParent() { return parentReference },
                getThis() { return thisReference },
                getChild() { return childID },
            }
        }


        function Mother(childrenCount) {
            var thisReference = this;
            var children = [];
            var testText = "test";

// Will not work:            
function childCallMe(id) {
                alert("mohter: " + id);
            }
// This will work:
this.childCallMe = function(id){ alert('mother' + id) };

            for(var i = 0; i < childrenCount; i++) {
                children[i] = new Child(thisReference, '#id' + i);
            }

            return {
                getTestText() { return testText },
                getThis() { return thisReference },
                getChildren() { return children },
            };
        };
    /*
        Mother.prototype.childCallMe = function(id) {
            alert(id);
            //I need to call a function in Mother
        };
    */

        var mother1 = new Mother(4);

I will reuse the 'mother' more times for different HTML Elements. The count of 'childs' can change too. I think I'm not clear how to use the this-context. In PHP it's very simple. :(

Answer 1

function Child(parent, childID) {
    var thisReference = this;

    $(childID).on("click", function() {
        parent.childCallMe(childID); // Gives 'TypeError: parent.childCallMe is not a function'
    });

    return {
        getThis() { return thisReference },
        getChild() { return childID },
    }
}


function Mother(childrenCount) {
    var thisReference = this;
    var children = [];

    function childCallMe(id) {
        alert(id);
    }

    for(var i = 0; i < childrenCount; i++) {
        children[i] = new Child(this, '#id' + i);
    }

    return { 
        getThis() { return thisReference },
        getChildren() { return children },
    };
};
Mother.prototype.childCallMe = function(id) {
    alert(id);
};

var mother1 = new Mother(4);

So, after refining your code a bit I noticed you didn't add the childCallMe method from the Mother 'class' and so Child didn't see it and hence the error.

Here is the way it makes the most sense:

function Child(parent, childID) {
    this.id = childID;

    $(childID).on("click", function() {
        parent.childCallMe(childID); // Gives 'TypeError: parent.childCallMe is not a function'
    });
}


function Mother(childrenCount) {
    this.children = [];

    function childCallMe(id) {
        alert(id);
    }

    for(var i = 0; i < childrenCount; i++) {
        this.children[i] = new Child(this, '#id' + i);
    }
};
Mother.prototype.childCallMe = function(id) {
    alert(id);
};

var mother1 = new Mother(4);