Piano Keys - Part 6

https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/dom-javascript-events/projects/piano-keys

Part 6

The keys aren’t changing color when clicked.

Here is the code I have so far:

// The keys and notes variables store the piano keys
const keys = [‘c-key’, ‘d-key’, ‘e-key’, ‘f-key’, ‘g-key’, ‘a-key’, ‘b-key’, ‘high-c-key’, ‘c-sharp-key’, ‘d-sharp-key’, ‘f-sharp-key’, ‘g-sharp-key’, ‘a-sharp-key’];
const notes = ;
keys.forEach(function(key){
notes.push(document.getElementById(key));
})

// Write named functions that change the color of the keys below
let keyPlay = function(event) {
event.target.style.backgroundColor = ‘red’;
}

let keyReturn = function(event) {
event.target.style.backgroundColor = ‘’;
}

// Write a named function with event handler properties

let eventAssignment = function (note) {
note.onmousedown = function(){
keyPlay(event);
}
note.onmouseup = function(){
keyReturn(event);
}
}

This is the node list, but we don’t see any listeners installed on it.

Callbacks have a very useful application… They move parameters around in the background.

notes.onmousedown = keyPlay;

The triggered event object is exposed when the callback is invoked.