Search code examples
javascriptimagemap

How to get elementID from within another function

I have some code:

function new_training() {
document.getElementById("training").style="";
tr++;
var newDiv = $('#training div:first').clone();
newDiv.attr('id', tr);
var delLink = 'This is item ' + tr + '<select name=priority> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <a class="btn btn-danger" style="text-align:right;margin-right:65px" href="javascript:deltr(' + tr + ')" > Delete Item ' + tr + ' </a>';
newDiv.find('tr:first th').text('Item ' + tr);
newDiv.append(delLink);
$('#training').append(newDiv);
newDiv.find('input:text').val('');
}

Which work good.

What i am trying to do is get the id of the element i click form an image map.

<area id="cupandplates" alt="" title="cupandplates" href="javascript:new_training()" shape="rect" coords="212,127,295,196" style="outline:none;" target="_self"     />
<area id="3cups" alt="" title="3cups" href="javascript:new_training()" shape="rect" coords="313,147,415,201" style="outline:none;" target="_self"     />
<area id="beerstines" alt="" title="beerstines" href="javascript:new_training()" shape="rect" coords="200,231,269,290" style="outline:none;" target="_self"     />

If i use this fuction:

function reply_click(clicked_id)
{
alert(clicked_id);
}

And change my area's

<area id="cupandplates" alt="" title="cupandplates" href="javascript:new_training()" onClick="reply_click(this.id)" shape="rect" coords="212,127,295,196" style="outline:none;" target="_self"     />
<area id="3cups" alt="" title="3cups" href="javascript:new_training()" onClick="reply_click(this.id)" shape="rect" coords="313,147,415,201" style="outline:none;" target="_self"     />
<area id="beerstines" alt="" title="beerstines" href="javascript:new_training()" onClick="reply_click(this.id)" shape="rect" coords="200,231,269,290" style="outline:none;" target="_self"     />

It will alert the proper ID

What i get now is:

This is item 1 Delete Item 1

This is item 2 Delete Item 2

This is item 3 Delete Item 3

Im not sure what to change to make it so i get:

This is cupandplates Delete Item 1

This is 3cups Delete Item 2

This is beerstines Delete Item 3

Any help would be great.

Solution

  • You have almost solved your own problem.

    It looks like you are looking for title attribute values from area element Instead of passing the id pass the event trigger object as a whole

    <area id="cupandplates" alt="" title="cupandplates" href="javascript:new_training()" onClick="reply_click(this)" shape="rect" coords="212,127,295,196" style="outline:none;" target="_self"     />
<area id="3cups" alt="" title="3cups" href="javascript:new_training()" onClick="reply_click(this)" shape="rect" coords="313,147,415,201" style="outline:none;" target="_self"     />
<area id="beerstines" alt="" title="beerstines" href="javascript:new_training()" onClick="reply_click(this)" shape="rect" coords="200,231,269,290" style="outline:none;" target="_self"     />

    and then access the title by using 

    function reply_click(element)
{
  alert(element.getAttribute("title"));
}