How to access dynamicly created objects in javascript?

Question

I have created a dynamic table and I want to access one of the created objects in a javascript. For example: How do I adress a dynamicly created button?

<script type="text/javascript">
function myJavaScriptFunction()
{ 
 //How do I know here which button triggered the function?
}
</script>

<table>
<% for (var i=0; i<10; i++) { %> 
  <tr class="rowcell">
   <td class="datacell">
   <input type="button" id='<%="button-no-"+i%>' value="myButton" onclick="myJavaScriptFunction()"/>
   </td>
 </tr>
<% } %>
</table>

Thank you in advance /John

Do you want to access this dynamically created content in Javascript or ASP? — Sean Dawson
– Sean Dawson, Commented Oct 8, 2012 at 7:51
how are you creating dynamic controls?in codebehind?or in javascript? — Amol Kolekar
– Amol Kolekar, Commented Oct 8, 2012 at 8:03
I want to access the dynamically created content in Javascript. — John
– John, Commented Oct 8, 2012 at 10:33

Stegrex · Accepted Answer · 2012-10-08 08:01:14Z

Map out the parameter to be the object:

function myJavaScriptFunction(object)
{ 
 //How do I know here which button triggered the function?
    var id = object.id;
}

In your HTML, you'll need to do:

onclick="myJavaScriptFunction(this)"

This is the point where you call the function, and you pass in the this keyword as an argument.

The keyword this refers to whichever HTML element did the calling, which is whatever button you clicked. The object has the attribute id which you have defined in the function as object.id. The value of attribute id is basically the "id" field of the input tag.

Putting it all together, you get:

<script type="text/javascript">
function myJavaScriptFunction(object) // You're defining the function as having a parameter that it accepts. In this case, it accepts an object.
{ 
   alert(object.id); // Alert the object's id.
   // Do what you want with object.id
}
</script>

<table>
<% for (var i=0; i<10; i++) { %> 
  <tr class="rowcell">
   <td class="datacell">
   <input type="button" id='<%="button-no-"+i%>' value="myButton" onclick="myJavaScriptFunction(this)"/>
   </td>
 </tr>
<% } %>
</table>

Musa · Accepted Answer · 2012-10-08 07:52:29Z

1

Pass the button element as a parameter to the function

<script type="text/javascript">
function myJavaScriptFunction(button)
{ 
 //button triggered the function
}
</script>

<table>
<% for (var i=0; i<10; i++) { %> 
  <tr class="rowcell">
   <td class="datacell">
   <input type="button" id='<%="button-no-"+i%>' value="myButton" onclick="myJavaScriptFunction(this)"/>
   </td>
 </tr>
<% } %>
</table>

answered Oct 8, 2012 at 7:52

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Comments

mr_lewjam · Accepted Answer · 2012-10-08 07:54:52Z

1

<script type="text/javascript">
function myJavaScriptFunction(button)
{ 
   alert($(button).attr('id')); // gets the id of the button that called the function
}
</script>

<table>
<% for (var i=0; i<10; i++) { %> 
  <tr class="rowcell">
   <td class="datacell">
   <input type="button" id='<%="button-no-"+i%>' value="myButton" onclick="myJavaScriptFunction(this)"/>
   </td>
 </tr>
<% } %>
</table>

answered Oct 8, 2012 at 7:54

mr_lewjam

1,1901 gold badge9 silver badges20 bronze badges

Comments

Justin Harvey · Accepted Answer · 2012-10-08 07:52:16Z

0

In javascript, like this

var elem = document.getElementById("button-no-1");

answered Oct 8, 2012 at 7:52

Justin Harvey

14.7k2 gold badges30 silver badges30 bronze badges

3 Comments

walther Over a year ago

Yes, and you'd hard-code all the possible dynamic buttons in advance, right?

Justin Harvey Over a year ago

@walther, you clearly missed the point, which was to show how you would do it, not provide a full solution.

walther Over a year ago

@JustinHarvey, not saying you must give it on a silver plate, but maybe show a basic idea. Your example doesn't show anything, except the most basic static element retrieval, which is utterly useless in this scenario. John needs a way to get an element, which has an unknown ID, because it was created dynamically. You show him how to find a static element instead. Understand the difference?

Zafer · Accepted Answer · 2012-10-08 07:52:54Z

0

You can change your code as follows:

<input type="button" id='<%="button-no-"+i%>' value="myButton" onclick="myJavaScriptFunction('<%="button-no-"+i%>')"/>



<script type="text/javascript">
function myJavaScriptFunction(buttonId)
{ 
 //How do I know here which button triggered the function?
}
</script>

answered Oct 8, 2012 at 7:52

Zafer

2,17517 silver badges30 bronze badges

Comments

Anton Rudeshko · Accepted Answer · 2012-10-08 07:53:30Z

0

You should know button id:

var button = document.getElementById("button-no-1");

answered Oct 8, 2012 at 7:53

Anton Rudeshko

1,1772 gold badges11 silver badges20 bronze badges

1 Comment

walther Over a year ago

Yes, and you'd hard-code all the possible dynamic buttons in advance, right?

Collectives™ on Stack Overflow

How to access dynamicly created objects in javascript?

6 Answers 6

Comments

Comments

Comments

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related