Piano Keys

Web Development Front-End
1

Hello,
Looks like I got a problem that Was discussed long ago. But I did not managed to find the any comments on the forum related to that problem. So, the problem is the crossed out parameter - event. Step 4 and 5. When I call keyPlay and keyReturn functions inside the named function. Can anybody tell me what was the problem, please?

2

In some code editors, a parameter is crossed out if it isn’t being used in the function,
or it may be crossed out because that parameter or variable hasn’t been declared yet.

In the later versions of JavaScript, event only works in the event handler function if it is a parameter of the function, which appears in the video somewhat like this:

function keyPlay(event) {
  event.target.backgroundColor = '#6df0c2';
}
function keyReturn(event) {
  event.target.backgroundColor = '';
}

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

But, in the video they have

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

since that worked in an older version of JavaScript. (Using event in an event handler used to work even without having event as a parameter for some versions of JavaScript.)
Here, it may show event crossed out because event has not been declared yet where event is being used.

my code

You could also assign the keyPlay and keyReturn functions to be the event handlers directly:

function eventAssignment(note) {
  note.onmousedown = keyPlay;
  note.onmouseup = keyReturn;
  //note.onmouseleave = keyReturn;
}

or using .addEventListener( )

function assignEvents(note) {
  note.addEventListener('mousedown', keyPlay);
  note.addEventListener('mouseup', keyReturn);
  //note.addEventListener('mouseleave', keyReturn);
}