Javascript calling a class function

Question

I'm trying to call a class function:

// Gantt chart object
function ganttChart(gContainerID) {

    this.isDebugMode = true;                                    // Is this chart in debug mode
    this.gContainer = document.getElementById(gContainerID);    // The container the chart is built inside
    this.gDebugPannel;                                          // Debug pannel

    // Create debug pannel
    if (this.isDebugMode) {
        this.gContainer.innerHTML += "<div id=\"gDebug" + gContainerID + "\" class=\"gDebug\">cometishian</div>";
        this.gDebugPannel = document.getElementById("gDebug" + gContainerID);
    }

    gDebug("lmfao!");

// Updates debug information
function gDebug(debugMessage) {
    alert(this.gDebugPannel.innerHTML);
    if (this.isDebugMode) { this.gDebugPannel.innerHTML = debugMessage; }
}
}

I expect it to alert "cometishian" but this.gDebugPannel.innerHTML is null, any ideas?

Upon further investigation this.gDebugPannel is undefined.

Update:

// Gantt chart object
function ganttChart(gContainerID) {

    this.isDebugMode = true;                                    // Is this chart in debug mode
    this.gContainer = document.getElementById(gContainerID);    // The container the chart is built inside
    this.gDebugPannel;                                          // Debug pannel
    this.gPosX;
    this.gPosY;

    // Create debug pannel
    if (this.isDebugMode) {
        this.gContainer.innerHTML += "<div id=\"gDebug" + gContainerID + "\" class=\"gDebug\">5,5 | 5.1</div>";
        this.gDebugPannel = document.getElementById("gDebug" + gContainerID);
    }

    // Updates debug information
    ganttChart.gDebug = function(debugMessage) {
        if (this.isDebugMode) { this.gDebugPannel.innerHTML = debugMessage; }
    }

    this.gDebug("wo");

}

the line this.gDebug("wo") throws:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; InfoPath.1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 1.1.4322; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; OfficeLiveConnector.1.4; OfficeLivePatch.1.3) Timestamp: Thu, 25 Nov 2010 12:57:51 UTC

Message: Object doesn't support this property or method
Line: 21
Char: 5
Code: 0
URI: http://server1/bb/ganttnew/gMain.js

The statement this.gDebugPannel; does nothing.

SLaks
– SLaks

2010-11-25 12:51:11 +00:00
Commented Nov 25, 2010 at 12:51 — SLaks
– SLaks, Commented Nov 25, 2010 at 12:51

SLaks · Accepted Answer · 2010-11-25 14:08:30Z

1

You need to call the function on the this instance, like this:

gDebug.call(this, "Hi!");

The correct way to do this is to put the function in the class prototype: (This should be done after declaring the constructor function)

ganttChart.prototype.gDebug = function(debugMessage) {
    alert(this.gDebugPannel.innerHTML);
    if (this.isDebugMode) { this.gDebugPannel.innerHTML = debugMessage; }
}

this.gDebug("Hi!");

edited Nov 25, 2010 at 14:08

answered Nov 25, 2010 at 12:49

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tom Gullen Over a year ago

Awesome thanks, why does this work when passing in two parameters though when the function is defined as accepting 1?

SLaks Over a year ago

@Tom: The call method takes the context (this), followed by the parameters to pass to the function. developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…

Tom Gullen Over a year ago

Thanks! I've prototyped it as you say (I want to do this properly) but I get an error, could you look at the updated code if its not too much of a problem for you

Tom Gullen Over a year ago

Ah instead of ganttChart.gDebug it should be this.gDebug right?

Naren Sisodiya · Accepted Answer · 2010-11-25 12:59:30Z

1

you can also do it as

this.gDebug= function(debugMessage) {
    alert(this.gDebugPannel.innerHTML);
    if (this.isDebugMode) { this.gDebugPannel.innerHTML = debugMessage; }
}

answered Nov 25, 2010 at 12:59

Naren Sisodiya

7,2882 gold badges27 silver badges35 bronze badges

Collectives™ on Stack Overflow

Javascript calling a class function

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related