Home/ Questions/Q 58797
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T17:54:15+00:00

Is there a best-practice or common way in JavaScript to have class members as

  • 0

Is there a best-practice or common way in JavaScript to have class members as event handlers?

Consider the following simple example:

<head>     <script language='javascript' type='text/javascript'>          ClickCounter = function(buttonId) {             this._clickCount = 0;             document.getElementById(buttonId).onclick = this.buttonClicked;         }          ClickCounter.prototype = {             buttonClicked: function() {                 this._clickCount++;                 alert('the button was clicked ' + this._clickCount + ' times');             }         }      </script> </head> <body>     <input type='button' id='btn1' value='Click me' />     <script language='javascript' type='text/javascript'>         var btn1counter = new ClickCounter('btn1');     </script> </body>

The event handler buttonClicked gets called, but the _clickCount member is inaccessible, or this points to some other object.

Any good tips/articles/resources about this kind of problems?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. ClickCounter = function(buttonId) {     this._clickCount = 0;     var that = this;     document.getElementById(buttonId).onclick = function(){ that.buttonClicked() }; }  ClickCounter.prototype = {     buttonClicked: function() {         this._clickCount++;         alert('the button was clicked ' + this._clickCount + ' times');     } }

    EDIT almost 10 years later, with ES6, arrow functions and class properties

    class ClickCounter  {    count = 0;    constructor( buttonId ){       document.getElementById(buttonId)           .addEventListener( 'click', this.buttonClicked );   }    buttonClicked = e => {      this.count += 1;      console.log(`clicked ${this.count} times`);    } }

    https://codepen.io/anon/pen/zaYvqq

    • 0