From the course: Building Website Interactivity with JavaScript

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Using data attributes for dynamic labeling

Using data attributes for dynamic labeling - JavaScript Tutorial

From the course: Building Website Interactivity with JavaScript

Start my 1-month free trial Buy for my team

Using data attributes for dynamic labeling

“

- [Instructor] The functionality we've set up works well, but we're currently hard coding the button label here in the JavaScript. This is not ideal. And in this video, we'll use data attributes to improve the approach. Generally speaking, it's a good idea to avoid hard coding content in our JavaScript. Content is generally the realm of our HTML, so keeping as much of our content in here as possible makes maintenance easier. With that in mind, it would be better to include the changing button labels in the HTML with the rest of the information. To do that, let's add some data attributes. These can be anything you like. They start with the word data, and a hyphen, and then you can include as many words as you want, as long as they're all lowercase and have hyphens separating the words. So in this case, we'll use label-show, and data-label-hide. And again, these could be as many words as you like. So when we're showing, we want this to say, "Show Password", and when we're hiding, we…

Contents