Find ID of HTML element which called JavaScript function

Question

I have a three button navigation panel, comprising of three divs and an anchor. On mouse over, myFunction() assigns a class to the three divs and anchor tag, for styling purposes.

<nav>
    <div id="btn1" class="button" onMouseOver="myFunction();">
    <div id="btn_bdr1">
    <div id="btn_bdr2">
        <a href="#"></a>
    </div>
    </div>
    </div>

    <div id="btn3" class="button" onMouseOver="myFunction();">
    <div id="btn_bdr1">
    <div id="btn_bdr2">
        <a href="#"></a>
    </div>
    </div>
   </div>

    <div id="btn2" class="button"  onMouseOver="myFunction();">
    <div id="btn_bdr1">
    <div id="btn_bdr2">
        <a href="#"></a>
    </div>
    </div>
    </div>
</nav>

What I need to do is find the ID of the div which called myFunction(), so I can make a change within the function to only the calling div, not all three.

Using JavaScript only, how can I go about doing this.

Thanks in advance.

Fyllekanin · Accepted Answer · 2017-08-31 22:02:07Z

5

There is two ways you can do is

1) Send an argument to the method with the div's name

Example

<div id="btn1" class="button" onMouseOver="myFunction('btn1')">

2) Send the element this

Example

<div id="btn1" class="button" onMouseOver="myFunction(this)">

In the javascript you can then do

myFunction(element) {
    //element is now the element you clicked on
}

answered Aug 31, 2017 at 22:02

Fyllekanin

2741 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mrkd1991 Over a year ago

Thanks Fyllekanin, your answer is the closest to what I am after, though I've gone with myFunction(this.id) as I need the id, not the element. I'll update the post with the actual code block used.

zfrisch · Accepted Answer · 2017-08-31 22:05:13Z

0

You can use the event object and look at the target (e.target). This is a reference to the element itself so to get the ID you would simply access the element's id property. (e.target.id)

document.querySelectorAll('.a').forEach(function(ele, ind) {
  ele.addEventListener("mouseover", function(e) {
    console.log(e.target, e.target.id);
  })
});

.a {
  height: 40px;
  width: 40px;
  border: solid black 3px;
  margin-top: 5px;
}

<div class="a" id="one"></div>
<div class="a" id="two"></div>
<div class="a" id="three"></div>

answered Aug 31, 2017 at 22:05

zfrisch

8,6901 gold badge26 silver badges39 bronze badges

Comments

robmathers · Accepted Answer · 2017-08-31 22:07:37Z

0

You can call this.event.target from myFunction() to determine which element generated the event.

For example:

myFunction() {
   console.log("I was called by: ", this.event.target);
}

answered Aug 31, 2017 at 22:07

robmathers

3,7661 gold badge29 silver badges31 bronze badges

Collectives™ on Stack Overflow

Find ID of HTML element which called JavaScript function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related