Projet Piano Keys / web development section 6 (interactive JS websites)

Language Help JavaScript
1

Hi!

I’m currently on the Piano Keys project inside the section 6 “Building Interactive JS Websites” of the web development path (https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/dom-javascript-events/projects/piano-keys).

From step 2 to 5, it is asked to write:

// Write named functions that change the color of the keys below
const keyPlay = function (event) {
  event.target.style.backgroundColor = "blue";
};
const keyReturn = function (event) {
  event.target.style.backgroundColor = "";
};

// Write a named function with event handler properties
const eventAssignment = function (note) {
  note.onmousedown = function () {
    keyPlay(event);
  };
  note.onmouseup = function () {
    keyReturn(event);
  };
};

Why are the KeyPkay and KeyReturn declarations needed, instead of just writing their contents inside the event handler functions associated with the note.onmouseXX events (as these functions are just used once inside the onmouseXX events) ?

Thanks a lot,
Victor

2

Indeed, they’re not. But it can be useful if you want to use them for other things (like make them trigger on key presses to mimic a piano).

1 Like
3

Expanding on what @toastedpitabread said, lessons and example code are trying to get you into the right mindset of thinking ahead, of how to write code that is reusable and easy to modify by yourself or others in the future.

It’s very obvious here because there isn’t a lot of source code, but imagine a much larger file where the event handlers are hundreds of lines away from the functions they are calling.

1 Like
4

Thanks for your help!