Question: I am working on this demo. Why am I not getting the text of the `#add-point` button?

```js
$("#add-point").on("click", function(){
  activatePointTool();
});

function activatePointTool() {
  var tool = $(this).text().toUpperCase().replace(/ /g, "_");
  console.log(tool);
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-point" class="btn btn-default btn-tool">Point</button>
```

Answer: 
you need to pass the target element to the function, because otherwise `this` will refer to the window object:

```
$("#add-point").on("click", function(){
  activatePointTool(this);
});

function activatePointTool(el) {
  var tool = $(el).text().toUpperCase().replace(/ /g, "_");
  console.log(tool);
}

```
If the only thing that the function does is to process the action - then forget the named function and simply include the desired action inside the click handler - in which the 'this' refers to the button that was clicked and you don't need to pass the element to another function.

```js
$("#add-point").on("click", function(){
   var tool = $(this).text().toUpperCase().replace(/ /g, "_");
  console.log(tool);
  })
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-point" class="btn btn-default btn-tool">Point</button>
```