First two, looks good.
The third one, was a bit of a complicated way of reaching round and scratching your own back…
I have wrote this for you, CodePen .
If I was to add another button to the DOM it wouldnt apply the same functionality to the new button as the previous buttons. unless you added in another line
You are also repeating alot of the smae functionality which means it can be simplified down to a single function. remember simple > complex, flat > nested (Zen of Python, but it applies)
So you can refactor your existing code into a single function that handles an event, as an argument that can then passed directly into the function.
The docs on Events , breaks down the event methods and what you can do with them.
Also good to know that:
Event object, returning it to the caller.
So the event.target lets us reference the individual object that the event has been triggered on. From here we can call
.getAttribute('data-color') this would give us what ever attribute we put in the HTML tag. we can put in
#hex etc to set the color by setting it to the element’s css background color property.
this way we can add more entries to the DOM, and have the same affect apply to it.
Hope that it helps,