JavaScript Function Access this from calling Element

Question

I have a function that I want to execute relevant to the calling elements but I can't seem to the pass it as itself as a reference to the function I want to execute.

In short, this works

<div style="background-color:#444444">
    <button onclick="this.parentElement.style.display = 'none';">close</button>
</div>

And this does not

<script>
   function close() { this.parentElement.style.display = 'none'; }
</script>

<div style="background-color:#444444">
    <button onclick="close()">close</button>
</div>

Why is this and is there a way around it?

document.getElementsByTagName("button")[0].addEventListener("click", close) — Bergi
– Bergi, Commented Mar 9, 2016 at 19:55

TheLovelySausage · Accepted Answer · 2016-03-09 19:51:43Z

1

Never mind, I'm an idiot

It seems I can simply pass the Element to the function with the this keyword

<script>
    function close(object) { object.parentElement.style.display = 'none'; }
</script>

<div style="background-color:#444444">
    <button onclick="close(this)">close</button>
</div>

answered Mar 9, 2016 at 19:51

TheLovelySausage

4,19217 gold badges69 silver badges119 bronze badges

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

Comments

nasso · Accepted Answer · 2016-03-09 19:58:21Z

0

It's because in the close() function, this is the window object.

Try passing the element as argument:

<script>
    function close(btn) { btn.parentElement.style.display = 'none'; }
</script>

<div style="background-color:#444444">
    <button onclick="close(this)">close</button>
</div>

answered Mar 9, 2016 at 19:58

nasso

6155 silver badges13 bronze badges

Comments

Jim · Accepted Answer · 2016-03-09 20:01:43Z

0

Off the top of my head, 'this' isn't pointing to the same object in the function as it is in the in-line code. You could pass 'this' in the function call, as in:

<script>
   function close(whichObj) { whichObj.parentElement.style.display = 'none'; }
</script>

<div style="background-color:#444444">
    <button onclick="close(this)">close</button>

HTH, Jim

answered Mar 9, 2016 at 20:01

Jim

2011 silver badge10 bronze badges

Collectives™ on Stack Overflow

JavaScript Function Access this from calling Element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related