Question

I want to make a javascript class with methods which I can call within the class as well as outside of the class. I want to make a “public” method, if you will. I want getTextAreaElement and appendTextArea to be such methods.

I’ve shown a snippet of best code I could come up with so far. I’ve also tried defining the methods as prototypes as well as within the class (this.func = ...). But that only allowed me to call the method outside (new Socket().appendTextArea("osgjr89");) but NOT within the class itself! The code snippet below shows the exact opposite implementation where I can’t call the method outside of the class but can call it within.

Error:

Uncaught TypeError: Object #Socket has no method ‘appendTextArea’

socket.js:

function Socket() {
var socket;
var canvas = document.getElementById('c');
var context = canvas.getContext("2d");

if (window.WebSocket) {
    socket = new WebSocket("ws://localhost:9012/websocket");
    socket.binaryType = 'arraybuffer';
    socket.onopen = onopen;
    socket.onmessage = onmessage;
    socket.onerror = onerror;
    socket.onclose = onclose;
} else {
    alert("Your browser does not support Web Socket.");
}

function getTextAreaElement() {
    return document.getElementById('responseText');
}

function appendTextArea(newData) {
    var el = getTextAreaElement();
    el.value = el.value + '\n' + newData + " :)";
}

function onopen(event) {
    getTextAreaElement().value = "Web Socket opened!"; 
}
/*[...]*/
}

main.js (loads after socket.js)

$(document).ready(function() {
var s = new Socket();
s.appendTextArea("osgjr89"); // ERROR!
});

UPDATED socket.js:

function Socket() {
[...]
if (window.WebSocket) {
    socket = new WebSocket("ws://localhost:9012/websocket");
    socket.binaryType = 'arraybuffer';
    socket.onopen = this.onopen;
    socket.onmessage = this.onmessage;
    socket.onerror = this.onerror;
    socket.onclose = this.onclose;
} else {
    alert("Your browser does not support Web Socket.");
}

this.getTextAreaElement = function() {
    return document.getElementById('responseText');
}

this.appendTextArea = function(newData) {
    var el = this.getTextAreaElement();
    el.value = el.value + '\n' + newData + " :)";
}

this.onopen = function(event) {
    this.getTextAreaElement().value = "Web Socket opened!";
}
[...]
}

Answer 1

All public methods must be declared as properties, not variables/functions. So, you have to change stuff like this:

function getTextAreaElement() {
    return document.getElementById('responseText');
}

into

this.getTextAreaElement = function() {
    return document.getElementById('responseText');
}