Samra
Samra

Reputation: 2013

get id of HTMLDivElement

I am passing an HTMLDivElement in function as follows

var tableHTML = "...
<li name="Item2" onclick="onCombToPie2D(\'' + id + '\');" >Pie 2D</li>
....";

$('#graphsDiv').append(tableHTML);

I was able to access this element in the function as follows

function onCombToPie2D(element) {

    alert($('#element'));


}

but now i cannot access the id of this element. I have tried the following so far

alert($('#element').attr('id')); //undefined
alert($('#element').prop('id')); //undefined
alert(element.id); //undefined

In my viewsource the div is present (which is a kendo chart)

<div id="chartmd2467rt6" data-role="chart" class="k-chart" style="position: relative; touch-action: none;"> ... </div>

Upvotes: 0

Views: 1718

Answers (3)

Shiladitya
Shiladitya

Reputation: 12181

I would suggest you to go with data-attribute rather than passing data as parameter.

$(document).on('click', 'li', function(){
  console.log($(this).data('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li name="Item2" data-id="chartmd2467rt6" >Pie 2D</li>
  <li name="Item2" data-id="chartmd2467ry0" >Line 2D</li>
</ul>
<div id="chartmd2467rt6" data-role="chart" class="k-chart" style="position: relative; touch-action: none;"> ... </div>

Hope this will help you.

Upvotes: 0

Samra
Samra

Reputation: 2013

instead of passing HTMLDivElement i passed its id to the function

<li name="Item2" onclick="onCombToPie2D(\'' + id.id + '\');" >Pie 2D</li>

Now in the function

function onCombToPie2D(element) {

    alert('#' + element);

}

this returned me the correct element

Upvotes: 0

Jean Mich&#233;l Marca
Jean Mich&#233;l Marca

Reputation: 169

try this sample:

    function onCombToPie2D(idElemento) {

       alert($('#'+idElemento).attr('id'));

    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li name="Item2" onclick="onCombToPie2D('chartmd2467rt6');" >Pie 2D</li>
</ul>
<div id="chartmd2467rt6" data-role="chart" class="k-chart" style="position: relative; touch-action: none;"> ... </div>

Upvotes: 4

Related Questions