Piano Keys Task 1

Task 1 asks to create a function named key which I have done

function keyPlay(event){
}

Then use the .target property to change the color of the keys.

function keyPlay(event){
  event.target.style.backgroundColor = "blue";
}
document.addEventListener('click', keyPlay);

So why doesn’t the function change key color. What is it that I’m not understanding?

What’s your plan exactly? Change the color when you click the document?

My plan is to change the color of the key. I have managed to change the c key color to blue however for the rest of the keys I will be repeating myself for each individual key to change key color. Is there a simpler way of doing so?

let changeKeyColor = document.getElementById('c-key');

function keyPlay(event){
  event.target.style.backgroundColor = "blue";
}
changeKeyColor.addEventListener('click', keyPlay);

When you use document.addEventListener(‘click’, keyPlay); every DOM element you click changes the color. That works but is probably not what you want.
You could create an array with all keys and then add the event listener to each element of the array with .forEach().