Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get ID of element that called a function

How can I get the ID of an element that called a JS function?

body.jpg is an image of a dog as the user points his/her mouse around the screen at different parts of the body an enlarged image is shown. The ID of the area element is identical to the image filename minus the folder and extension.

<div>     <img src="images/body.jpg" usemap="#anatomy"/> </div>  <map name="anatomy">   <area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom()"/> </map>  <script type="text/javascript"> function zoom() {  document.getElementById("preview").src="images/nose.jpg"; } </script>  <div> <img id="preview"/> </div> 

I've done my research and have come to Stack Overflow as a last resort. I'm prefer a solution that doesn't involve jQuery.

like image 784
Ambo100 Avatar asked Oct 02 '11 15:10

Ambo100


People also ask

How do I find the ID of an element in an event?

You can use event.target.id in event handler to get id of element that fired an event.

How do I grab an element by ID?

getElementById() The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.

Which JavaScript method is used to access an HTML element by id?

The getElementById Method The most common way to access an HTML element is to use the id of the element. In the example above the getElementById method used id="demo" to find the element.


2 Answers

Pass a reference to the element into the function when it is called:

<area id="nose" onmouseover="zoom(this);" />  <script>   function zoom(ele) {     var id = ele.id;      console.log('area element id = ' + id);   } </script> 
like image 85
James Sumners Avatar answered Oct 07 '22 17:10

James Sumners


I'm surprised that nobody has mentioned the use of this in the event handler. It works automatically in modern browsers and can be made to work in other browsers. If you use addEventListener or attachEvent to install your event handler, then you can make the value of this automatically be assigned to the object the created the event.

Further, the user of programmatically installed event handlers allows you to separate javascript code from HTML which is often considered a good thing.

Here's how you would do that in your code in plain javascript:

Remove the onmouseover="zoom()" from your HTML and install the event handler in your javascript like this:

// simplified utility function to register an event handler cross-browser function setEventHandler(obj, name, fn) {     if (typeof obj == "string") {         obj = document.getElementById(obj);     }     if (obj.addEventListener) {         return(obj.addEventListener(name, fn));     } else if (obj.attachEvent) {         return(obj.attachEvent("on" + name, function() {return(fn.call(obj));}));     } }  function zoom() {     // you can use "this" here to refer to the object that caused the event     // this here will refer to the calling object (which in this case is the <map>)     console.log(this.id);     document.getElementById("preview").src="http://photos.smugmug.com/photos/344290962_h6JjS-Ti.jpg"; }  // register your event handler setEventHandler("nose", "mouseover", zoom); 
like image 29
jfriend00 Avatar answered Oct 07 '22 16:10

jfriend00