In Events 3 I’m sure there must be simpler way than mine. Also in Events 2 I wanted to make the circle only be able to move within the canvas. Any suggestion would be highly regarded.
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:
Creates an 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 rgba()hsl()#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.