Assigning a containers Y position In loop

Question

I want to have my "definitionContainer"s Y position to be at the same Y position of the "questionMarkContainer".

Im not sure how to save the Y position of the questionMarkContainer and apply it to "definitionContainer" Y position when the questionMarkContaineris clicked.

I tried definitionContainer.myNewCords = xOffsetNumberContainer; definitionContainer.y = definitionContainer.myNewCords;

How can i accomplish the task.

 function writeOutDefinitionsQuestionMarksOnRight() {
        var yOffsetNumberContainer = 102;

            for (var c = 0; c < randomTermsForUserSorting.length; c++) {

                var questionMarkContainer = new createjs.Container();
                var Highlight = new createjs.Shape();
                Highlight.graphics.beginFill("hotPink").drawRoundRect(0, 0, 30, 25, 5);
                var HighLightlabel = new createjs.Text("?", "10pt arial bold", "white");
                HighLightlabel.textAlign = "center";
                HighLightlabel.x = 15
                HighLightlabel.y = 5
                questionMarkContainer.addChild(Highlight, HighLightlabel);
                self.stage.addChild(questionMarkContainer);
                questionMarkContainer.x = 720;
                questionMarkContainer.y = yOffsetNumberContainer;
                questionMarkContainer.termIndex = c;

                // calling a function to return the clickHandler function
                // because there was some crazy stuff with using the closure of 
                // termIndex where the clickHandler function was always the last index.
                // The 'usual' method of getting around this situation wasnt working for some reason.
                var clickHandler = (function (termIndex) {
                    return function (e) {
                        var definitionContainer = new createjs.Container();

                        definitionContainer.myNewCords = yOffsetNumberContainer;

                        rect = new createjs.Shape();
                        rect.graphics.beginFill("DarkGreen").drawRoundRect(0, 0, 350, 150, 8);

                        var name = new createjs.Text(randomTermsForUserSorting[termIndex].Name, "12pt arial", "white");
                        name.x = 5;
                        name.y = 5;
                        name.lineWidth = 300;

                        var definitionText = new createjs.Text(randomTermsForUserSorting[termIndex].Definition, "10pt arial", "white");
                        definitionText.x = 5;
                        definitionText.y = 35;
                        definitionText.lineWidth = 330;

                        var xButtonRectangle = new createjs.Shape();
                        xButtonRectangle.graphics.beginFill("red").drawRoundRect(320, 5, 20, 20, 2);

                        var xTextCloseButton = new createjs.Text("X", "10pt arial", "white");
                        xTextCloseButton.x = 325;
                        xTextCloseButton.y = 7;

                        definitionContainer.addChild(rect, name, definitionText,xButtonRectangle, xTextCloseButton);

                        self.stage.addChild(definitionContainer);
                        definitionContainer.x = 300;

                        definitionContainer.y = yOffsetNumberContainer;

                        definitionContainer.addEventListener("click", function () {
                            self.stage.removeChild(definitionContainer);
                        });
                    }
                })(c);

                questionMarkContainer.addEventListener("click", clickHandler);
                yOffsetNumberContainer += 40;
            }

        }

Answer 1

It looks like you are just adjusting a single yOffsetContainer property, which is referenced inside the click function. The click is fired later, and will use the yOffsetContainer variable, which has already been set to the number of items x 40. It does not save the loop value inside each item.

You should be able to pass the loop value as a parameter in your closure to store the loop value in the click handler:

var clickHandler = (function (termIndex, yOffset) {
    return function (e) {

        // OTHER CODE NOT SHOWN

        definitionContainer.y = yOffset;

        // MORE CODE NOT SHOWN

    }
})(c, yOffsetNumberContainer);