adding onclick event to dynamically added button?

Question

I am adding a button dynamically in html like below: On click of that button I want to call a Javascript function:

var but = document.createElement("button");

but.value="delete row";

but.setAttribute("onclick","callJavascriptFunction()");
//this is not working

but.onclick="callJavascriptFunction()"
//this is also not working

document.getElementById("but").onclick="callJavascriptFunction()"
//this is also not working

but.id="but"+inc;

Are there any ways to resolve this??Plz help me., thanks in advance

score 26 · Accepted Answer · edited Mar 29 '16 at 16:27

26

try this:

but.onclick = callJavascriptFunction;

or create the button by wrapping it with another element and use innerHTML:

var span = document.createElement('span');
span.innerHTML = '<button id="but' + inc +'" onclick="callJavascriptFunction()" />';

edited Mar 29 '16 at 16:27

Micromega

12,405
7
32
72

answered Aug 05 '11 at 12:36

jerjer

8,574
29
36

dude everything is ok.. But I am not able to give the ID by concatinating the string : but and inc... Plz help...... "but' + inc +'" this is not working – sanjeev Aug 05 '11 at 15:01
try : span.firstChild.setAttribute("but" + inc); after the span.innerHTML, also i assume that inc is a variable, and that must be set before it is used. let me know it still doesn't work for you. – jerjer Aug 08 '11 at 04:00
4

how to add params to callJavascriptFunction() like callJavascriptFunction(p1,p2,p3) – Rahul Matte Jun 10 '16 at 08:20
It works, but how! What's the difference between `btn.onclick = function_name();` and `btn.onclick = function_name`. – Dman Cannon Jan 25 '21 at 06:41

score 15 · Answer 2 · answered Aug 05 '11 at 12:30

15

Remove the () from your expressions that are not working will get the desired results you need.

but.setAttribute("onclick",callJavascriptFunction);
but.onclick= callJavascriptFunction;
document.getElementById("but").onclick=callJavascriptFunction;

answered Aug 05 '11 at 12:30

Brett Walker

3,516
1
16
36

1

Why the setAttribute when you also do onclick? Dont all browsers just support onclick? – TJHeuvel Aug 05 '11 at 12:33
Thanks, that just helped me! – Brian Stallter Jul 04 '17 at 23:26
when sending a parameter for function how to call function – livemaker Nov 23 '17 at 10:26

score 8 · Answer 3 · answered Aug 28 '15 at 09:12

This code work good to me and look more simple. Necessary to call a function with specific parameter.

var btn = document.createElement("BUTTON");  //<button> element
var t = document.createTextNode("MyButton"); // Create a text node
btn.appendChild(t);   

btn.onclick = function(){myFunction(myparameter)};  
document.getElementById("myView").appendChild(btn);//to show on myView

score 6 · Answer 4 · answered Aug 05 '11 at 12:37

6

Try
but.addEventListener('click', yourFunction) Note the absence of parantheses () after the function name. This is because you are assigning the function, not calling it.

answered Aug 05 '11 at 12:37

Nivas

17,720
4
58
75

score 5 · Answer 5 · answered Jun 25 '17 at 23:00

5

but.onclick = function() { yourjavascriptfunction();};

or

but.onclick = function() { functionwithparam(param);};

answered Jun 25 '17 at 23:00

kennydelacruz

114
1
4

> The significant drawback with inline events is that unlike event listeners described above, you may only have one inline event assigned. Inline events are stored as an attribute/property of the element[doc], meaning that it can be overwritten. (https://stackoverflow.com/a/6348597/1872046) – polkovnikov.ph Jun 26 '17 at 11:40

score 3 · Answer 6 · answered Aug 26 '15 at 00:17

I was having a similar issue but none of these fixes worked. The problem was that my button was not yet on the page. The fix for this ended up being going from this:

//Bad code.
var btn = document.createElement('button');
btn.onClick = function() {  console.log("hey");  }

to this:

//Working Code.  I don't like it, but it works. 
var btn = document.createElement('button');
var wrapper = document.createElement('div');
wrapper.appendChild(btn);

document.body.appendChild(wrapper);
var buttons = wrapper.getElementsByTagName("BUTTON");
buttons[0].onclick = function(){  console.log("hey");  }

I have no clue at all why this works. Adding the button to the page and referring to it any other way did not work.

I made this answer a very long time ago, and would no longer recommend it. Instead, use `btn.addEventListener('click', function(event){ do stuff });` — Seph Reed, Jul 11 '17 at 23:28

score 2 · Answer 7 · edited May 06 '15 at 23:54

2

Try this:

var inputTag = document.createElement("div");              
inputTag.innerHTML = "<input type = 'button' value = 'oooh' onClick = 'your_function_name()'>";    
document.body.appendChild(inputTag);

This creates a button inside a DIV which works perfectly!

edited May 06 '15 at 23:54

Ciarán Bruen

5,091
13
55
68

answered Dec 02 '12 at 23:07

hiTman

21
1

score 1 · Answer 8 · answered Aug 05 '11 at 12:33

1

but.onclick = callJavascriptFunction;

no double quotes no parentheses.

answered Aug 05 '11 at 12:33

nobody

10,394
4
24
42

1

what if you want arguments? – Alex Apr 19 '17 at 00:00

score 0 · Answer 9 · edited Dec 25 '21 at 14:09

0

Using modern JavaScript, this solution works well:

let btn = document.getElementById("btnID");
btn.onclick = () => {onAction(url, method);};

edited Dec 25 '21 at 14:09

IPSDSILVA

1,468
7
24

answered Dec 24 '21 at 18:28

fullonic

1

adding onclick event to dynamically added button?

9 Answers9

Linked