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 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:

1
/**
2
* Adds an event handler that runs when the mouse pointer is moved
3
 onto the element.
4
*/
5
export function takeTourButton_mouseIn(event) {
6
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
7
 // Add your code for this event here: 
8
}

1. 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 $. 

2. 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").

   

3. Press Enter to add the code for the element you selected.

1
export function takeTourButton_mouseIn(event) {
2
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
3
 // Add your code for this event here: 
4
 $w('#takeTourButton')
5
}

1. 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.

2. Press Enter to add the code you selected.

1
export function takeTourButton_mouseIn(event) {
2
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
3
 // Add your code for this event here: 
4
 $w('#takeTourButton').label
5
}

1. To set the label to its new value add = "Let's Go!"; at the end of the line and save your work.

1
export function takeTourButton_mouseIn(event) {
2
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
3
 // Add your code for this event here: 
4
 $w('#takeTourButton').label = "Let's Go!";
5
}

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:

1
/**
2
* Adds an event handler that runs when the mouse pointer is moved
3
 onto the element.
4
*/
5
export function takeTourButton_mouseIn(event) {
6
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
7
 // Add your code for this event here: 
8
}

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."