单击时如何获取元素的ID-javascript

Question

I am developing a canvas application on which a user can draw various shapes. Various elements are drawn using d3.js. I want to use jsplumb to connect two SVG elements for which I need the id of each element when it is clicked on. Each element has an id that is generated by code when it is drawn and thus I don't know it before hand.

Is there a javascript implementation by which I can get the id of the elements on which I click? I wouldn't preferably want to add '' on each element that is being drawn on the canvas.

Can anyone suggest a way to do this?

Answer 1

You can use something like this

<script type='text/javascript'>
    doClick = function (sender){
    alert(sender.id);
}
</script>

<div id='a1' onclick='doClick(this)'>div1</div>
<div id='a2' onclick='doClick(this)'>div2</div>

https://jsfiddle.net/dy47dbvp/3/

Answer 2

You can simply access an element's ID using that element's attributes

var elemID = droppedElement.attr('id');

To get the id of the clicked Element:

$('#container').on('click', '.droppedElement', function (e) {
      var elemID = droppedElement.attr('id');
}

The container is your canvas id and the droppedElement is the variable that captures the svg element or the clone of the svg element(if that is your case)