Tutorial: Changing the Text Label of a Button with Code
6 min read
We’re in the process of rolling out a new design! In the meantime, some of the features that you use may not be the same as described here. Learn more.
Visit the Corvid by Wix website to onboard and continue learning.
An Event is something that happens to an element in your site. The Events section in the Properties 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 on it. Here's what you would do:
- Add the Take the Tour button to your site.
- The Properties Panel shows you the default properties for the button you just added.
- In the Properties Panel, click 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.)
- In the Events section hover over onMouseIn, click the + , and press Enter.
- The name of the onMouseIn event handler is displayed.
The Code Panel also opens automatically. This is what you'll see there:
- Let's add the code that changes the text on the button. Afterwards we'll go back and see how it worked. At line 4 where it says: //Add your code for this event here: replace that text with a $ and then press Ctrl + Space.
- 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").
- Press Enter and the code for the element you selected is added to the Code Panel.
- 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.
- Press Enter and the code you selected is added to the Code Panel.
- To set the label to its new value add = "Let's Go!"; at the end of the line and save your work.
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 Events 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 Panel for your page, which add the takeTour_mouseIn function to your page code:
1export function takeTourButton_mouseIn(event) {
2 ///write your code here
3}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 Developer Tools adds code to your page that watches or "listens" to your button to see if it's ever hovered on. If it is, Developer Tools 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 Panel 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 enabled, 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 box doesn't have the enabled method because it doesn't make sense to enable a text box. 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."
The thing you can't see is that Developer Tools adds code to your page that watches or "listens" to your button to see if it's ever hovered on. If it is, Developer Tools 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 Panel 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 enabled, 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 box doesn't have the enabled method because it doesn't make sense to enable a text box. 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.
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.
Did this help?
|