Creating a button dynamically with arguments for onclick [duplicate]

Question

Possible Duplicate:
How to pass arguments to an event handler function and still use ‘this’ reference?

I've done a bit of searching but I'm struggling to find a solution to this.

Anyway:

function CreateMe(){

    //....

    var mycell = row.insertCell(-1);
    var myelement3 = document.createmyelement("input");
    myelement3.type = "button";
    myelement3.value = "Delete";
    myelement3.onclick = DeleteMe;
    myelement3.name = "Delete[]";
    mycell.appendChild(myelement3);

    //....

}

function DeleteMe(){
    alert(this);
}

I have a form with a button that calls CreateMe which dynamically creates a button. What I'm after is to be able to pass in arguments to the DeleteMe function when this dynamic button is clicked; in particular this:

onclick="DeleteMe(this.parentNode.parentNode.rowIndex)"

from: http://www.java2s.com/Code/JavaScript/HTML/Deletingtablerows.htm

I'm at a bit of a loss on how to proceed here, so if anybody could lend a hand it would be appreciated.

Edit: Just to be clear, what is being asked is how I can pass arguments from the onclick event of the dynamically generated button to the DeleteMe function. Clearly I am unable to do this as this would simply evaluate the function immediately:

    myelement3.value = "Delete";
    myelement3.onclick=DeleteMe(this.parentNode.parentNode.rowIndex);
    myelement3.name = "Delete[]";

Did you ever look into jQuery? It makes your life a LOT easier, aspecially in these kind of situations. — Hidde
– Hidde, Commented Dec 25, 2012 at 23:43
possible duplicate of How to pass arguments to an event handler function and still use 'this' reference? and also How to pass/escape an argument to an event handler attached using javascript?. I searched for javascript event handler pass argument. — Felix Kling
– Felix Kling, Commented Dec 25, 2012 at 23:47
@Hidde, Ah to be honest I'd really rather not involve something like jQuery. I'm just not too keen on such libraries etc. — R4D4
– R4D4, Commented Dec 26, 2012 at 0:00
@FelixKling I'm sorry, but I'm not quite seeing how they are possible duplicates as neither of those make any mention of dynamically generated buttons. :S However this is probably my lack of understanding of JS than your fault. ;) — R4D4
– R4D4, Commented Dec 26, 2012 at 0:02
There a couple of ways to set up event handlers. Have a look at quirksmode.org/js/introevents.html for an comprehensive explanation. The easiest way would be to assign a function to the onclick property: element.onclick = function() {...}. And how the function could look like can be found in the other two questions ;) edit: See, you are nearly there, you just have to do: myelement3.onclick = function() { DeleteMe(this.parentNode.parentNode.rowIndex); };, or use .call to also set this properly if you need it, just as shown in stackoverflow.com/q/9202339/218196. — Felix Kling
– Felix Kling, Commented Dec 26, 2012 at 0:08

Felix Kling · Accepted Answer · 2012-12-26 00:17:33Z

7

You are nearly there. .onclick is expected to be a function, so all you have to do is wrap that function call into another function:

myelement3.onclick = function() { 
    DeleteMe(this.parentNode.parentNode.rowIndex);
    // or
    // DeleteMe.call(this, this.parentNode.parentNode.rowIndex);
    // to set `this` inside `DeleteMe` to the DOM element as well.
};

If the browser supports .bind, you could even do:

myelement3.onclick = DeleteMe.bind(
    myelement3, 
    myelement3.parentNode.parentNode.rowIndex
);

but that would evaluate myelement3.parentNode.parentNode.rowIndex at the moment of creation and not when the element is clicked. If elements change their position, this could lead to problems, and in this case you'd rather go with the first solution.

Alternative, since this refers to the clicked element, you can access the row index inside DeleteMe:

function DeleteMe(){
    var index = this.parentNode.parentNode.rowIndex;
}

// ...

myelement3.onclick = DeleteMe;

This works as long as you call DeleteMe only as event handler and not manually.

answered Dec 26, 2012 at 0:17

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

2 Comments

R4D4 Over a year ago

Thank you very much for your patience and explanation. Merry Christmas! :)

Felix Kling Over a year ago

No problem :) Merry Christmas to you too!

The Alpha · Accepted Answer · 2012-12-25 23:51:39Z

0

You can try this

function DeleteMe(e){
    e = e || window.event;
    var el = e.target || e.srcElement;
    // here el is your button that's been clicked
    alert(el.parentNode.parentNode.rowIndex);
}

answered Dec 25, 2012 at 23:51

The Alpha

147k30 gold badges294 silver badges313 bronze badges

1 Comment

R4D4 Over a year ago

What I'm finding difficult is how exactly I setup the onclick part of the dynamically generated button to pass an argument to DeleteMe.

Collectives™ on Stack Overflow

Creating a button dynamically with arguments for onclick [duplicate]

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related