Hi there!! I have a paragraph “<p>” element and I want to attach a click event to it. But I want that event to be executed by an object method and I do not know how to do it.

This is an example of what I want to do:

Code:

<html>
    <head>
        
        <title></title>
    <script type="text/javascript">
        
        var user;
       function load()
       {
        user=new User("john");
        user.loadclick();
       }
       function User(username) 
       {
           this.username=username;
       }
       
       User.prototype.loadclick=function()
       {
           parag=document.getElementById("parag");
           //parag.setAttribute("onclick","this.clickFunc()");//does not work
           parag.setAttribute("onclick","User.prototype.clickFunc()");//does not work, username undefined
       }

       User.prototype.clickFunc=function()
       {
           console.log("in click Func, username="+this.username);
       }
    </script>
    </head>
    <body onload="load()">
        <p id="parag">the text</p>
    </body>
</html>
I want to trigger “clickFunc” each time user click on the paragraph.

Could someone tell me how to do it??
Thank you very much!!!