Use prototype javascript in dom element

Question

Forgot my initial typo in original snippet here is exaly want I trying to do:

How can I use prototyped variable in Dom element event?

Suppose :

function MyProto(){
  this.valeur = "toto";
}

MyProto.prototype = {
  func1: function() {
     var t = document.createTextNode("func1 called ");
    document.body.appendChild(t);
    var br = document.createElement("br");
    document.body.appendChild(br);        
    this.func2();
  },
  func2: function() {
     var t = document.createTextNode("func2 called");
     document.body.appendChild(t);
  }
};

var proto = new MyProto();
document.getElementById("myButton").addEventListener("click",proto.func1);

<button id="myButton">Press here</button>

In this example, when I press button it throw me this.func2 is not a function. I must to mention that ultimately the Dom element will be generated by HtmlHelper from Asp.Net MVC.

Answer 1

First Problem

That's just a typo, you are calling funct1 instead of func1

Second Problem (Update)

The problem is when you add the listener your way: .addEventListener("click",proto.func1)

this will be the clicked element, not your proto instance, to solve this problem you can wrap it in another function clause, like the snippet below.

function MyProto() {
  this.valeur = "toto";
}

MyProto.prototype = {
  func1: function() {
    var t = document.createTextNode("func1 called ");
    document.body.appendChild(t);
    var br = document.createElement("br");
    document.body.appendChild(br);
    this.func2();
  },
  func2: function() {
    var t = document.createTextNode("func2 called");
    document.body.appendChild(t);
  }
};

var proto = new MyProto();
document.getElementById("myButton2").addEventListener("click", function() {
  proto.func1()
});

<button id="myButton1" onclick="proto.func1()">First Button</button>
<button id="myButton2">Second Button</button>