How to give Onclick function to dynamic created button (Number of button will change every time)

Question

I am creating number of buttons depending upon length of records . So number of buttons will change when record will change every time I will run program. Here is my code of it .

for (var i = 0; i < labels.length; i++) {
<button type="button" id='+i+'>'+i+'</button>';
}

It will create buttons 1,2,3,4,5....up-to length of labels. Now problem is that I want to assign them id and onclick. On everyonclick It will pass value to a function which button was press like I will pass 1 if 1st button was pressed and 2 if 2nd button is pressed. How I can do it ? I saw that Question that reported as duplicate question but he is using jquery and not passing any values to new function based on Id (which is my main problem) .

@AgamBanga I am new in javascript. Can you give a demo type thing please ? It would be great favor — Pro-Web, May 08 '17 at 05:22
@AgamBanga no its not. I have checked that one. I am not using plugin or AJAX etc — Pro-Web, May 08 '17 at 05:27

Mayank Pandeyz · Accepted Answer · 2017-05-08T05:25:58.020

2

Try this:

<button type="button" class="mybtn" id='+i+'>'+i+'</button>';

the button have a common class mybtn and with incremented id value in it.

And you can assign event listener to it like:

$(document).on('click', '.mybtn', function(){
    alert( $(this).attr('id') );
    // Will give the id value for the clicked button
});

edited May 08 '17 at 05:25

answered May 08 '17 at 05:21

Mayank Pandeyz

23,243
3
29
52

this button code will come in for loop ?? And onclick will outside for loop ? – Pro-Web May 08 '17 at 05:24
Yes, your understanding is correct – Mayank Pandeyz May 08 '17 at 05:25
`mybtn` is `.mybtn` as it is a class. Just slip of mind :P – Mayank Pandeyz May 08 '17 at 05:26
thank you @Mayank Pandeyz . Worked perfectly for me. – Pro-Web May 08 '17 at 07:12

score 2 · Answer 2 · answered May 08 '17 at 05:21

Below is something that you want:

var buttons="";
for (var i = 0; i < 10; i++) {
  buttons+='<button type="button" id='+i+' onClick="alert('+i+');">'+i+'</button>';
}
document.getElementById('area').innerHTML = buttons;

<div id="area"></div>

UPDATE You can call any function in the onClick handler and pass any value you want.

prasanth · Answer 3 · 2017-05-08T05:27:40.953

0

Try this simple javascript onclick function

for (var i = 0; i < 10; i++) {
document.body.innerHTML +='<button type="button" id='+i+' onclick="test(this)">'+i+'</button>';
}
 function test(that){
 console.log(that.id+'  was passed')
 
 }

edited May 08 '17 at 05:27

answered May 08 '17 at 05:22

prasanth

19,775
3
25
48

let me check.it seems a good move – Pro-Web May 08 '17 at 05:26

score 0 · Answer 4 · answered May 08 '17 at 05:24

Since this buttons are dynamically created you need to delegate the event

for (var i = 0; i < 6; i++) {
   // some parent element to hold the buttons
  $('#buttonHolder').append('<button class ="buttonClass" type="button" id=' + i + '>' + i + '</button>');
}

 //on click delegate the event to button
$('body').on('click', '.buttonClass', function() {
  console.log($(this).attr('id'))

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='buttonHolder'></div>

How to give Onclick function to dynamic created button (Number of button will change every time)

4 Answers4