> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Change the Text Label of a Button with Events
## Article: Change the Text Label of a Button with Events
## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-editor-elements/change-the-text-label-of-a-button-with-events.md
## Article Content:
# Velo Tutorial: Change the Text Label of a Button with Events
An **Event** is something that happens to an element in your site. The **Events Handlers** section in the [Properties & Events panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md) lets your site respond to these events by adding **Event Handlers** to your elements. For example, let's say you have a site with a "Take the tour" button. You'd like the text on the button to change to "Let's Go!" when the user hovers over it. Here's what you would do:
1. Use the Add panel to add a button to your site.
2. Change its text to "Take the tour".
3. The Properties & Events panel shows you the default properties for the button you just added.
4. In the Properties Panel, click on the **ID** name to rename the element to **takeTourButton** and press **Enter**. This makes the element easier to identify. (This isn't required, but it is recommended.)
5. In the **Event Handlers** section click **onMouseIn,** click the **+** , and press **Enter**. The name of the onMouseIn event handler is displayed.
6. Code is automatically added to the code editor. This is what you'll see there:
```javascript
$w('#takeTourButton').onMouseIn((event) => {
// Add your code for this event here:
})
```
7. Let's add the code that changes the text on the button. Afterwards we'll go back and see how it worked. Under line 7 where it says: **//Add your code for this event here:** add a line and type **$**.
8. A popup window opens that contains a list of all the elements in your site surrounded by some code. Use the arrow keys to move down and select **$w("#takeTourButton")**.
9. Press **Enter** to add the code for the element you selected.
```javascript
$w('#takeTourButton').onMouseIn((event) => {
// Add your code for this event here:
$w('#takeTourButton');
})
```
10. Now enter a period at the end of the line and you'll see a popup window that contains a list of all the properties, methods, and events that you can use with your element. Use the arrow keys to scroll down and select the **label** property.
11. Press **Enter** to add the code you selected.
```javascript
$w('#takeTourButton').onMouseIn((event) => {
// Add your code for this event here:
$w('#takeTourButton');
})
```
12. To set the label to its new value add **\= "Let's Go!";** at the end of the line and save your work.
```javascript
$w('#takeTourButton').onMouseIn((event) => {
// Add your code for this event here:
$w('#takeTourButton').label = "Let's Go!";
})
```
And that's it! Click **Preview** and you can test that your code works. Hover over the "Take the tour" button and it will change to look like this:
### Understanding the Code
When you selected the **onMouseIn** event handler in the **Event Handlers** section two things happened - one of them you can see and the other you can't. The thing you _can_ see is that these lines were added to the code editor for your page, which add the **takeTour\_mouseIn** function to your page code:
```javascript
$w('#takeTourButton').onMouseIn((event) => {
// Add your code for this event here:
})
```
This function is a block of code that will run whenever takeTourButton is hovered on. The way that works has to do with the thing that happened that you can't see.
The thing you _can't_ see is that Velo adds code to your page that watches or "listens" to your button to see if it's ever hovered on. If it is, Velo knows it needs to run any code that's inside the takeTourButton mouseIn function. That means any code between the { and } is run whenever takeTourButton is hovered on.
Now we come to the code that you created inside your event handler function. Some of what you needed to enter in the code editor is simply code syntax. Syntax is a set of rules that lets us communicate using code. In our case, the first thing we need to do is tell the code that we want to do something to takeTourButton. We do that with **$w("#takeTourButton")**. Why? You can obviously see the takeTourButton element name in there. The rest is the syntax that tells the code "This isn't just words, it's the name of an element on my page I want to do something to."
Each element has certain properties, methods, and events associated with it. Properties are the things about your element that you might want to know or change. In the example above we used the label property to set the label text of our button. You may have noticed that there were other properties like `link` and `id`, and methods like `hide` and `isEnabled`, that were also in the list for the button. The list of properties, methods, and events associated with an element is specific to that element. For example, a Text Element doesn't have the `isEnabled` method because it doesn't make sense to enable a Text Element. But a button can be enabled (clickable) or disabled (not clickable).
Then we added a period at the end of the element. This tells the code "Now I want to work with one of the properties, methods, or events that are associated with my element." `label` is the property that controls the text that appears on a button, so we selected it. Then all we needed to do was assign a new text to the label property, in our case "Let's Go!" The semicolon at the end is standard JavaScript syntax that says "this is the end of a line."
>**Note:**
> In this tutorial the event and the response to that event both happen on the same element. We add an event that watches to see if the user hovers on a button, and if they do we change the label of that button.
>
> It's important to note that you aren't limited to the event and its response being on the same element and that any event on any action can create a response on any other element in your site. It all depends on what element you select in the code you put inside your function.