如何从另一个函数中获取elementID

Question

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.

Answer 1

You need to pass the ref to the element when calling:

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

Then inside the javascript function, use the ref as:

function new_training(el)
{
  var id = el.getAttribute("id");
  //use the id
}

OR if you directly want to pass the id, then try like this:

<area id="cupandplates" alt="" title="cupandplates" href="javascript:new_training(this.id)" shape="rect" coords="212,127,295,196" style="outline:none;" target="_self"     />

Hope it helps

Answer 2

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"));
}