Howdy 
First of all, letās get rid of your early bad habbits in syntax:
- Donāt use underscores _ in the names of your methods. Javascript developers use camelCase (google it) for naming convention:
.onTopBaseA_Range_YellowBtnPressed()
vs
.onTopBaseARangeYellowBtnPressed()
- Try to keep the method names short. The name should only tell what the method does or when it is called. For example:
.onClick()
.moveForward()
vs
onRedButtonWithYellowStripesClickedTwoTimes()
Now, about your problem. Lets refresh how we use variables first.
- Rule number 1: Define your variable.
var myVariable;
- Rule number 2: Assign some value to it (in other words, store something inside that variable)
myVariable = 5;
- Rule number 3: Use the data stored inside the variable only after rules 1 and 2 are passed.
myVariable + 2; // 7
You must follow these rules with anything in Javascript, be it objects, properties, variables, libraries, JSON payloads. Remember them. If you skip rules 1 or 2 or both, and jump straght to number 3, the compiler will complain that the variable is undefined. You must start from rule 1.
Often it is verbose to write rules 1 and 2 on new lines, so Javascript allows to merge them into a single string:
var myVariable = 5;
But the order is still preserved - the variable is defined first, then it is assigned a value.
Can you tell by now where you problem is?
Perhaps, to fully open your issue, I could introduce you to a new concept - Javascript Objects. Well, its not really new. Youāve actually been using them all this time.
Say you want to create a character:
var character;
To make it more than just an empty blob of nothingness, you want to add a name to it and a language it speaks:
var charName = "LeXXik";
var language = "Marsian";
But now, those character treats are stored in their own variables, so you canāt simply pass character variable to some function. You would also have to send charName and language. But what if the char has dozens of properties? You can see how it quickly becomes hard to handle. Javascript objects are the answer.
A Javascript object is a simple collection of key:value pairs. Where you can name keys anything you want, and assign them any value, another object or even a function that returns a value. Pretty much anything, really. The objects syntax is to enclose the pairs in curly brackets { }. So, our character would look something like this:
{
name: "LeXXik",
language: "Marsian"
}
Great, now we have a character, but how do we use it? How can I get that name, for example? Well, remember rule number 1:
var character = {
name: "LeXXik",
language: "Marsian"
};
We defined the variable and assigned a value to it. So, now our variable stores an object that describes our character. How do we get that name? Pretty simple - we use so called ādot notationā to access object properties. This should be familiar to you:
var name = character.name;
We can even extend it further:
var character = {
name: "LeXXik",
language: {
name: "Marsian",
level: "pretty good"
}
};
var languageLevel = character.language.level;
Here we added another object with properties that describe the language LeXXik may speak. This is a very common and powerful method, which gives you an ability to create rich descriptions about an object. Now, instead of passing a dozens of variables, you can simply send a single character variable that stores the object.
The answer.
Here is your code:
var child = parent.findByName(...);
myYellow.element.on(...)
You broke the rule number 1 and 2, and straight went to number 3 by using myYellow variable without defining it or giving it any value. The variable myYellow is empty, and has no object inside, that would have a key with a name element. However your child variable does, and should be used instead:
var child = parent.findByName(...);
child.element.on(...)
Your child was properly defined and stores an entity object that was found by the engine:
var child = {
...
...
element: {
...
...
on: function() { ... }
...
}
};
So, when you run child.element.on(), the engine looks inside the object stored in the variable and using the dot notation finds the .on() method.
I will give an answer tomorrow, if you are still stuck by then.
