How to call prototype function in HTML element on some event?

Question

I have calendar constructor function and two prototype functions in first prototype function I am creating div element and creating it's attribute ondragstart and I want to call another prototype function on in it's second argument var that = this; that.drag(event), but when it renders it shows <div ondragstart="that.drag(event)"> console gives error that is not function. How can I call prototype function in this situation? please explain with example, thanks.

 calendar.prototype.tbl = function(){
 var that = this;
 var evDiv = document.createElement('div');     
 evDiv.setAttribute('draggable', 'true');
 evDiv.setAttribute('ondragstart', 'that.drag(event)');
 }

 calendar.prototype.drag = function(ev){
    ev.dataTransfer.setData("text", ev.target.id);
 }

Do not use setAttribute. Do not use event listener attributes. Do not use code inside strings. — Bergi
– Bergi, Commented Nov 25, 2016 at 14:10
Do not use event handlers (prefixed with on). Use event listeners. — Oriol
– Oriol, Commented Nov 25, 2016 at 14:43

Oriol · Accepted Answer · 2016-11-25 14:49:04Z

1

Use addEventListener:

calendar.prototype.tbl = function() {
    var that = this;
    var evDiv = document.createElement('div');

    evDiv.draggable = true;
    evDiv.addEventListener('dragstart', that.drag);
};

calendar.prototype.drag = function(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
};

edited Nov 25, 2016 at 14:49

Oriol

291k71 gold badges459 silver badges535 bronze badges

answered Nov 25, 2016 at 14:09

martinarroyo

9,7713 gold badges42 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to call prototype function in HTML element on some event?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related