Piano Keys

I am working on the piano keys project
https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-22-building-interactive-websites/modules/wdcp-22-dom-events-with-javascript/projects/piano-keys
I have my code as the following, when I press the key it goes gray when I release the key it should go back to normal color it doesn’t go back? I watched the video that’s attached his code is the same as mine when he presses the key it goes a different color when he releases the key it goes normal? Just confused to why this is the case.

const keyPlay = function(event) {
  event.target.style.backgroundColor = "grey";
}
const 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);
  };
};

You would need to have the event parameter in the function you’re assigning to the event listener.

Instead of

  note.onmousedown = function () {
    keyPlay(event);
  };

you could do

  note.onmousedown = keyPlay;

or

  note.onmousedown = function (event) {
    keyPlay(event);
  };

Another possibility is

  note.addEventListener("mousedown", keyPlay);

And similarly for the .onmouseup stuff.

1 Like

Thanks. I think I got it.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.