I’m working on the “Piano keys” project (https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/dom-javascript-events/projects/piano-keys) and the thing I don’t understand is about the syntax of the first function with event handler properties that we are asked to write.
We are first asked to write a function that changes the color of the keys, and I wrote:
const keyPlay = function(event) {
event.target.style.backgroundColor = ‘yellow’;
}
Later we are asked to write a function (which I called playNote) that runs the keyPlay function when a mousedown event fires on a note. I would have written this:
let playNote = function(note) {
note.onmousedown = keyPlay(event);
}
but the “walkthrough video” tells us instead to do it like this:
let playNote = function(note) {
note.onmousedown = function(event) {
keyPlay(event);
}
}
Why is the redundancy necessary? can’t I just say note.onmousedown = playNote(event) but must instead call another anonymous function (note.onmousedown = function(event) {keyPlay(event)})?
