title: How to use text area on change event and class object variables?
body: <p>I have an object of class <code>TextManager</code>, it has some number <code>xx</code> which is set initially to zero in the constructor.
  I want to be able to update the object's <code>xx</code> variable whenever the text area changes.</p>
  
  <pre><code>class Drawer {
      canvasElement: HTMLCanvasElement;
      constructor(_canvasElement: HTMLCanvasElement) {
          this.canvasElement = _canvasElement;
      }
      drawCircle(x:number,y:number,radius:number,color:string) {
          var ctx = this.canvasElement.getContext("2d");
          ctx.beginPath();
          ctx.arc(x, y, radius, 0, 2 * Math.PI);
          ctx.fillStyle = color;
          ctx.closePath();
          ctx.fill();
      }
  }
  
  var canv;
  var drawer;
  var d = 0;
  var textAreaElement;
  var textManager;
  
  class TextManager{
      textAreaElement: HTMLAreaElement;
      xx: number;
      constructor(_textAreaElement: HTMLAreaElement) {
          this.textAreaElement = _textAreaElement;
          this.xx = 0;
          this.textAreaElement.onchange = this.update;
      }
  
      update() {
          this.xx += 10;
          if (this.xx &gt; 50) this.xx = 0;
          drawer.drawCircle(95 + this.xx, 50, 40, "#FF0000");
  
      }
  }
  
  window.onload = () =&gt; {
      canv =  &lt;HTMLCanvasElement&gt;document.getElementById("myCanvas");
      drawer = new Drawer(canv);
      textAreaElement = &lt;HTMLAreaElement&gt;document.getElementById("codeArea");
      textManager = new TextManager(textAreaElement);
  };
  </code></pre>
  
  <p>The problem is that using this way in the code results in <code>xx = NaN</code>. As i think it's not accessing the member, it's just accessing the function inside the class.</p>
  
  <p>How can i update the object's <code>xx</code> with each event occurrence ? </p>