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\">etishian</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 "etishian" 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 (patible; 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

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\">etishian</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 "etishian" 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 (patible; 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

• javascript
• class
• function
• scope

• The statement this.gDebugPannel; does nothing. – SLaks Commented Nov 25, 2010 at 12:51

2 Answers 2

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!");

you can also do it as

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