Help javascript beginner

[Derek Chow]

Hello I am a programmer, but being the first time using javascript i get an error which i never seen before in other languages.

To start off i made my own window which works fine, now i want to for loop through an array to draw progress bars.
unlockablesWindow.prototype.initialize = function(x,y){
Window_Base.prototype.initialize.call(this,x,y,Graphics.boxWidth,Graphics.boxHeight);
for(var i = 0; i < achievementText.length; i++){
unlockablesWindow.prototype.createVariableBars(i);
}


unlockablesWindow.prototype.createVariableBars = function(x){
var lineheight = this.lineHeight;
this._variableBar = new Sprite();
this._variableBar.x = 0;
this._variableBar.y = lineheight*x;
var variableBarWidth = Graphics.boxWidth-50;
var variableBarHeight = 30;
this.addChild(this._variableBar);
this.drawText(achievementText[x],0,lineheight*x,Graphics.boxWidth/3,'left');
this._variableBar.bitmap = new Bitmap(variableBarWidth,variableBarHeight);
this._variableBar.bitmap.fillAll('white');
}

The error on the function createVariableBars and the error is on addchild

Cannot read property 'length' of undefined
at unlockablesWindow.PIXI.DisplayObjectContainer.addChild (pixi.js:1903)

I checked pixi, but i do not understand js enough to debug it . Any help is appreciated Thanks.

 

[Companion Wulf]

This works for me:

Spoiler: Code

var achievementText = "Achievements"; // I added this for testing

    function Window_Unlocakbles() {
        this.initialize.apply(this, arguments);
    }

    Window_Unlocakbles.prototype = Object.create(Window_Base.prototype);
    Window_Unlocakbles.prototype.constructor = Window_Unlocakbles;

Window_Unlocakbles.prototype.initialize = function(x,y){
    Window_Base.prototype.initialize.call(this,x,y,Graphics.boxWidth,Graphics.boxHeight);
    for(var i = 0; i < achievementText.length; i++){
        this.createVariableBars(i);
    }
};


Window_Unlocakbles.prototype.createVariableBars = function(x){
    var lineheight = this.lineHeight;
    this._variableBar = new Sprite();
    this._variableBar.x = 0;
    this._variableBar.y = lineheight*x;
 
    this.addChild(this._variableBar);
    this.drawVars(x);
};

Window_Unlocakbles.prototype.variableBarWidth = function() {
    return Graphics.boxWidth-50;
}

Window_Unlocakbles.prototype.variableBarHeight = function() {
    return 30;
}

Window_Unlocakbles.prototype.drawVars = function(x) {
    var lineheight = this.lineHeight();
    this.drawText(achievementText[x],0,lineheight*x,Graphics.boxWidth/3,'left');
    this._variableBar.bitmap = new Bitmap(this.variableBarWidth(),this.variableBarHeight());
    this._variableBar.bitmap.fillAll('white');
}

CWT._alias_Scene_Map_start = Scene_Map.prototype.start;
Scene_Map.prototype.start = function() {
    CWT._alias_Scene_Map_start.call(this);
    this._ach = new Window_Unlocakbles(0, 0);
    this.addChild(this._ach);
}

It's common form to use Window_ first, although it's still a matter of preference. Plus, it's easier to identify.

 

[Derek Chow]

Thanks, Helped a lot

 

[DKPlugins]

I think what error here: var lineheight = this.lineHeight;
You are lost brackets () and now in variable is an object, not the value of the function.

 

[Boy Who Codes]

To add with what CompanionWulf and DKPlugins told you, I would like to give you an advice not to use prototype in the same class you're referencing it to. Since you're doing it in a single class, referencing the prototype of the same class is not necessary and may cause you into a bad practice. For example, this:

unlockablesWindow.prototype.createVariableBars(i);

could be just written as this.createVariableBars(i);

as you're referencing the function createVariableBars in the window class.

I would like you to read this part for example:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

 

[Companion Wulf]

I think what error here: var lineheight = this.lineHeight;
You are lost brackets () and now in variable is an object, not the value of the function.

That's something I overlooked, as I added the lineHeight variable afterwards. In my code it was this._variableBar.y= this.lineHeight()*x. (I tend to use lh for line height more often than not.)