Acabo de comenzar a usar javascript y me falta algo importante en mi conocimiento. Esperaba que pudieras ayudarme a llenar el vacío.

Por lo tanto, el script que estoy intentando ejecutar es para contar los caracteres en un campo de texto y actualizar un párrafo para decirle al usuario cuántos caracteres ha escrito. Tengo un objeto llamado charCounter. sourceId es el id del área de texto para contar caracteres. statusId es el id del párrafo para actualizar cada vez que se presiona una tecla.

function charCounter(sourceId, statusId) {
    this.sourceId = sourceId;
    this.statusId = statusId;
    this.count = 0;
}

Hay un método llamado updateAll. Actualiza el recuento de caracteres y actualiza el párrafo.

charCounter.prototype.updateAll = function() {
    //get the character count;
    //change the paragraph;
}

Tengo una función de inicio que se llama cuando se carga la ventana.

function start() {
    //This is the problem
    document.getElementbyId('mytextfield').onkeydown = myCounter.updateAll;
    document.getElementbyId('mytextfield').onkeyup = myCounter.updateAll;
}

myCounter = new charCounter("mytextfield","charcount");
window.onload = start;

El código anterior es el problema. ¿Por qué no puedo llamar al método myCounter.updateAll cuando se dispara el evento? Esto es realmente confuso para mí. Entiendo que si llamas a un métodoMe gusta esto() obtendrá un valor de la función. Si tu lo llamasMe gusta esto estás recibiendo un puntero a una función. Estoy apuntando mi evento a una función. También he intentado activar la función directamente y funciona bien, pero no funcionará cuando se dispare el evento.

¿Qué me estoy perdiendo?

Gracias por todas las respuestas. Aquí hay tres implementaciones diferentes.

Implementación 1

function CharCounter(sourceId, statusId) {
    this.sourceId = sourceId;
    this.statusId = statusId;
    this.count = 0;
};
    CharCounter.prototype.updateAll = function() {
        this.count = document.getElementById(this.sourceId).value.length;
        document.getElementById(this.statusId).innerHTML = "There are "+this.count+" charactors";
    };

function start() {
    myCharCounter.updateAll();
    document.getElementById('mytextfield').onkeyup = function() { myCharCounter.updateAll(); };
    document.getElementById('mytextfield').onkeydown = function() { myCharCounter.updateAll(); };   
};

myCharCounter = new CharCounter('mytextfield','charcount');
window.onload = start;

Implementación 2

function CharCounter(sourceId, statusId) {
    this.sourceId = sourceId;
    this.statusId = statusId;
    this.count = 0;
};
    CharCounter.prototype.updateAll = function() {
        this.count = document.getElementById(this.sourceId).value.length;
        document.getElementById(this.statusId).innerHTML = "There are "+ this.count+" charactors";
    };
    CharCounter.prototype.start = function() {
        var instance = this;
        instance.updateAll();

        document.getElementById(this.sourceId).onkeyup = function() {
            instance.updateAll();
        };
        document.getElementById(this.sourceId).onkeydown = function() {
            instance.updateAll();
        };
    };

window.onload = function() {
    var myCounter = new CharCounter("mytextfield","charcount");
    myCounter.start();
};

Implementación 3

function CharCounter(sourceId, statusId) {
    this.sourceId = sourceId;
    this.statusId = statusId;
    this.count = 0;
};
    CharCounter.prototype.updateAll = function() {
        this.count = document.getElementById(this.sourceId).value.length;
        document.getElementById(this.statusId).innerHTML = "There are "+this.count+" charactors";
    };

function bind(funcToCall, desiredThisValue) {
    return function() { funcToCall.apply(desiredThisValue); };
};  

function start() {
    myCharCounter.updateAll();
    document.getElementById('mytextfield').onkeyup = bind(myCharCounter.updateAll,    myCharCounter);
    document.getElementById('mytextfield').onkeydown = bind(myCharCounter.updateAll, myCharCounter);
};

myCharCounter = new CharCounter('mytextfield','charcount');
window.onload = start;