Hi guys,
I’m stuck on the last question from the Events assessment. I can’t figure out how to change the background colour depending on which button has been click.
Below is what I’ve done so far to act as a test. I have considered using a conditional statement in the function but I don’t how I to return the data-color for specific buttons without adding to the HTML.
Any help would be appreciated.
Thanks.
Regards,
Jared
@Jared_Cave sure thing, let’s give you some clues here.
First of all, you know about event bubbling, right? If not, heave a read of https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture.
Basically, if you’ve set an event listener on a parent, you’ll be able to fire the event on its children too, which is really useful and can save you a lot of code if say you have hundreds of buttons you want to click to trigger functionality. So firing the event on the buttonBar, like you have done, is the right way to go.
Next, you’ll need to use the event handler function’s event object to access the element that the the event was fired on (the event target, as it were). This section has all the code you’ll need: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_objects.
The question tells us that the colors are contained in the button’s data-color attributes. If you’ve got a reference to an element, how do you get the value of one of its attributes? Do some searches and find out.
OK, enough clues for now — show me how it’s done 
Got it 