Get the identifier of the element that calls the function

Question

How can I get the id of the element that called the JS function?

body.jpg - this is an image of a dog, when the user hovers over the screen in different parts of the body, an enlarged image is displayed on the screen. The area element identifier is identical to the image file name 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 did my research and came to Kara as a last resort. I prefer a solution that is not related to jQuery.

Answer 1

Pass the element reference to 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> 

Answer 2

I am surprised that no one mentioned the use of this in an event handler. It works automatically in modern browsers and can work in other browsers. If you use addEventListener or attachEvent to install an event handler, you can automatically assign this object generated by the event.

In addition, a user of programmatically installed event handlers allows you to separate JavaScript code from HTML, which is often considered good.

Here is how you could do it in your code in plain javascript:

Remove onmouseover="zoom()" from your HTML and set the event handler in your javascript as follows:

 // 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); 

Answer 3

You can use 'this' in the event handler:

 document.getElementById("preview").onmouseover = function() { alert(this.id); } 

Or pass the event object to the handler as follows:

 document.getElementById("preview").onmouseover = function(evt) { alert(evt.target.id); } 

To attach events, it is recommended to use attachEvent (for IE <9) / addEventListener (IE9 and other browsers). The example above is for brevity.

 function myHandler(evt) { alert(evt.target.id); } var el = document.getElementById("preview"); if (el.addEventListener){ el.addEventListener('click', myHandler, false); } else if (el.attachEvent){ el.attachEvent('onclick', myHandler); } 

Answer 4

You can program the handler setting as follows:

 <area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom.call(this)"/> 

Then this in your handler will refer to the element. Now I will provide a disclaimer that I am not 100% sure what happens when you have a handler in the <area> , largely because I have not seen the <area> tag for about a decade, I think it should give you an image tag, but that might be wrong.

edit - yes, this is wrong - you get the <area> , not the <img> . So you have to get the parent element (map) and then find the image that uses it (ie, <img> , the attribute "usemap" refers to the name of the map).

change again - other than that it doesn’t matter because you want the "id" durr region. Sorry for reading incorrectly.

Answer 5

I know that you do not want the jQuery solution, but including javascript inside HTML, be great, no.

I mean, you can do this, but there are many reasons why you shouldn't (read on unobtrusive javascript if you want more details).

So, in the interest of other people who can see this question, here is a jQuery solution:

 $(document).ready(function() { $('area').mouseover(function(event) { $('#preview').attr('src', 'images/' + $(event.srcElement).attr('id')); }); }); 

The main advantage is that you do not mix javascript code with HTML. In addition, you only need to write once, and it will work for all tags, and not to specify a handler for each separately.

An additional advantage is that each jQuery handler gets an event object that contains a lot of useful data - for example, the source of the event, the type of event, etc., which greatly facilitates writing down the type of code that you are using.

Finally, since this is jQuery, you don’t need to think about cross-browser materials - the main advantage, especially when working with events.

Answer 6

I also want this to happen, so just pass the id of the element in the called function and used in my js file:

 function copy(i,n) { var range = document.createRange(); range.selectNode(document.getElementById(i)); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand('copy'); window.getSelection().removeAllRanges(); document.getElementById(n).value = "Copied"; }