Build a Game Project: Feed-A-Star-Mole Build a Game Project: Feed-A-Star-Mole

Data Attributes

Brian Holt
Brian Holt
SQLite Cloud
Check out a free preview of the full Build a Game Project: Feed-A-Star-Mole course:
The "Data Attributes" Lesson is part of the full, Build a Game Project: Feed-A-Star-Mole course featured in this preview video. Here's what you'd learn in this lesson's course:

Brian explains what a data attribute is, and implements it in the HTML.

Get Unlimited Access Now

Transcript from the "Data Attributes" Lesson

[00:00:00]
>> Brian Holt: So,I guess there is one more thing on here that I had not talked about. Did Jen talk about data attributes on HTML? Okay, well, let's come back over here. Right now we have a bunch of moles showing up, including some more lutts. If I inspect element on this,

[00:00:21]
>> Brian Holt: I want inspector, rules, layout.
>> Brian Holt: Let's put this on the side and dock to right.
>> Brian Holt: Okay, so here you notice it has its data-index="0". There's a cool trick that you can do with HTML. So if I come in here and say, mole = document.querySelector.
>> Brian Holt: And what did I call them?

[00:00:54]
I called them moles, right? Hopefully, class="mole", okay, .mole. So now mole is equal to this king element right there, right? So I'm gonna have 12 different moles on the page and it's gonna matter which one I click on, right? Because I have to not show that one, and I have to operate individually on each different mole.

[00:01:18]
It'd be annoying to go bind to 12 event listeners, that's not at all what I wanna do. So it'd be cool if I could tell which one I was clicking on, and this data-index is gonna help us with that. So if I say mole.dataset.index, I'm gonna get whatever the data- is.

[00:01:41]
So it's basically a variable that you're keeping in the HTML.
>> Brian Holt: So let's go back here and say mole, querySelectorAll. So now I have all of them in here, right? So if I do moles of the fifth one on the page, or it would be the sixth one rather, data set.index, notice that that's five.

[00:02:13]
So now I can tell them apart easily in the JavaScript. And it doesn't have to be called, It can be data dash, whatever right? For example, if I come back over here to the top one and I say data,
>> Brian Holt: -some-other-thing="this is cool".
>> Brian Holt: Now if I come back over here and refresh, and I grab that mole again.

[00:02:46]
So now if I save mole.dataset.some other thing, notice I can get this is cool out of the out of the HTML there. Does that make sense? So now it's really easy for me to tell these moles apart in my JavaScript.
>> Brian Holt: So notice that this is data-some-other-thing, right?

[00:03:13]
And then here when I reference it, the way that I do it, it's in case, and you also don't include the data in there.
>> Speaker 2: And dataset is the method that gets anything with the prefix data?
>> Brian Holt: Data dash.
>> Speaker 2: Data dash.
>> Brian Holt: Yep, that's exactly it. Okay, so that's what those data dash indexes are for.