All right, and once we're able to fetch our user now let's take care of the buttons where as we're
hovering over a specific button, of course, I would want to change my title and then, of course,
of the value and believe it or not, the hardest part is already behind us, because as far as this
set up, it's not going to be as hard as you think.
So we have our handle volume.
Correct.
And then every time I'm hovering over the button, I can get the target because I pass in the event
object.
And then specifically I'm looking for target property.
Now, one Gotcher one, you have the button and line inside of the button.
There's something else.
For example, in this case, of course it is our icon is the fact that.
Well, that target is changing, or in my case, since data label, this is very important, I'm looking
for that data label.
Since that one is sitting on a button, I actually need to make sure that I only get the info when I'm
hovering over the button, and I'll show you that in a split second.
So at the moment, I have a console and I notice in some cases, yes, I get of the button, but then
in some cases I get a 3G.
Essentially I'm getting my icon.
And while that kind of works, since I'm looking for a data label, well, I kind of get that data label
from the Asaji.
This is the value that I'm looking for.
That's the one that I would need, because, of course, once I don't know which button less, then
of course I will be able to change these two values over here.
So first, before we do anything as far as the functionality in the value.
I just want to make sure that I'm actually hovering over the button, so we'll go with if an event target,
so whatever I'm hovering over and then we can simply go with class list and then contains.
So in religious terms, I'm just saying, hey, listen, check if the target that I'm hovering over,
does it have a class of ikon?
If it does beautiful, that means that it is my button because remember the button has the classroom
icon, not the font.
Awesome icon.
Correct.
So if that is the case, then of course I will get that data label.
If it is not the case, well, doesn't matter then don't do anything.
And then as far as accessing that data label, well, again, we need to go back to the analogy land
and we go with data set.
Now, since I name this data hyphen label, that is the name of my attribute, if I would want to get
the value in what I want.
Yes, I would need to go with data set dot and the name is label.
So if you'll call this Uncle Bobby and of course you'll have to go with data set and then dot and then
whatever is the name.
So in here I'm just checking whether I'm hovering over the button, not the icon, which is good.
So now I have my button and of course I'll have to have some kind of new variable and I'll set new value
and then I'm going to be looking for a different target.
So my button, this points to the button.
And I remember in order to get data attribute, I just need to go with VeriSign and then DOT and then
label and now I'm getting that particular value.
And if you want to control log course, definitely do so.
So we're going to go with new value.
And as I'm hovering notice now, I'm getting these values for those labels, so now we need to put two
and two together.
So we are getting the ages, the passwords, the numbers and all that.
And we already have that in our object.
So there was a way for us to access them dynamically on this object.
So if you want again, you can control a log of the new or I'm sorry person, that should be our object.
So if you can still log notice, this gets me that object.
Correct.
So what I'm looking for here is, of course, the value for the property.
So I already have the property name.
Correct.
That is in my label.
And then the second thing is, of course, this value I have the property name in the object.
So what we can do is we can just dynamically access the object property value and we simply do so by
using the square brackets in here set value instead of hard coating anything.
I'm just going to go with that person.
So that is my object and I'll dynamically access the property value bypassing and the property.
Again, if you need to go back to my JavaScript Nugget series, please do so because there I go to way
more detail how we can access them.
At the end of the day, it is just so I'm not going to spend too much time on it.
And also remember that when we talk about the title, I also want to change it.
And in this case I'm getting already the string correct.
Because remember in here we're just passing in the string.
So what we could do is instead of console logging everything meaning the person object, I'm just going
to go with set and title and that one will be equal to my new value string.
And what you'll notice right now that, yep, we get this random user beautiful.
But as you're hovering over the buttons, notice how we're changing these values around.
So we have the emails, we have age, street, phone and all that good stuff can get different user.
And again, we can do exactly the same.
That was the project.
Hopefully everyone enjoys it and I hope the next one.