How do I run an object's method onEvent in javascript?

events, function, javascript, methods, pointers

Solution

I think you are having problems accessing your instance members on the `updateAll` function, since you are using it as an event handler, the context (the `this` keyword) is the DOM element that triggered the event, not your CharCounter object instance.

You could do something like this:

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

CharCounter.prototype.updateAll = function() {
  var text = document.getElementById(this.sourceId).value;
  document.getElementById(this.statusId).innerHTML = text.length;
};

CharCounter.prototype.start = function() {
  // event binding
  var instance = this; // store the current context
  document.getElementById(this.sourceId).onkeyup = function () {
    instance.updateAll(); // use 'instance' because in event handlers
                          // the 'this' keyword refers to the DOM element.
  }; 
}

window.onload = function () {
  var myCharCounter = new CharCounter('textarea1', 'status');
  myCharCounter.start();
};

Check the above example running here.

Problem

I just started using javascript and I'm missing something important in my knowledge. I was hoping you could help me fill in the gap. So the script I'm trying to run is suppose to count the characters in a text field, and update a paragraph to tell the user how many characters they have typed. I have an object called charCounter. sourceId is the id of the text area to count characters in. statusId is the id of the paragraph to update everytime a key is pressed. ``` function charCounter(sourceId, statusId) { this.sourceId = sourceId; this.statusId = statusId; this.count = 0; } ``` There is one method called updateAll. It updates the count of characters and updates the paragraph. ``` charCounter.prototype.updateAll = function() { //get the character count; //change the paragraph; } ``` I have a start function that is called when the window loads. ``` 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; ``` The above code is the problem. Why in the world can't I call the myCounter.updateAll method when the event is fired? This is really confusing to me. I understand that if you call a method likeThis() you'll get a value from the function. If you call it likeThis you are getting a pointer to a function. I'm pointing my event to a function. I've also tried calling the function straight up and it works just fine, but it will not work when the event is fired. What am I missing? Thanks for all the answers. Here's three different implementations. Implementation 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; ``` Implementation 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(); }; ``` Implementation 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; ```

Original source