# arrow function not working for on click event.. "function" does

**URL:** <https://talk.observablehq.com/t/arrow-function-not-working-for-on-click-event-function-does/1739>\
**Category:** Help\
**Created:** [March 7, 2019, 11:40pm UTC](https://talk.observablehq.com/t/arrow-function-not-working-for-on-click-event-function-does/1739 "2019-03-07T23:40:18Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mbrownshoes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbrownshoes/32/423_2.png) [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)\
**Post date:** [March 7, 2019, 11:40pm UTC](https://talk.observablehq.com/t/arrow-function-not-working-for-on-click-event-function-does/1739/1 "2019-03-07T23:40:18Z")

</div>

This seems very odd to me so thought I’d bring it up here. I have points on a map (in a notebook) I want to change the colour when they are clicked.

This works

```auto
d3.selectAll('circle')
  .on('click', function(d, i) {
    d3.select(this)
      .style('fill', 'orange');
  });

```

but this shorter form doesn’t’

```auto
.on("click", d => {
   d3.select(this)
      .style('fill', 'orange');
  });

```

What the heck? Any ideas what the reason is?

---

<div class="post-metadata">

**Author:** ![mbrownshoes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbrownshoes/32/423_2.png) [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)\
**Post date:** [March 7, 2019, 11:48pm UTC](https://talk.observablehq.com/t/arrow-function-not-working-for-on-click-event-function-does/1739/2 "2019-03-07T23:48:12Z")

</div>

Ah, just found this

> **[On D3 and Arrow Functions](https://medium.com/@yonester/on-d3-and-arrow-functions-b6559c1cebb8)**
>
> D3 implements a useful pattern where functions that operate on selections are given the selected DOM element via this. It allows us to use…