Piano Keys Help

#1

I can’t figure out why my code is not working. I worked through step 6 and my keys don’t change colors.

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

const keyReturn = function(event) {
  event.target.style.backgroundColor = '';
}

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

// Write a loop that runs the array elements through the function
notes.forEach(pressKeys);
2 Likes
#2
const pressKeys = function(note) {
  note.onmousedown = function() {
    keyPlay(event);
  }
   note.onmouseup = function()  {
    keyReturn(event);
  }
}

What happens when you give the two callback functions an event parameter?

2 Likes
#3

:man_facepalming: Thank you! This is solved the issue.

2 Likes
#4

And again in the instruction video it did work without passing event. @mtf how can we address this to the Codecademy staff?

3 Likes
#5

We can invite the CM to refer the matter to the dev team for further review.

@alyssavigil, N.B.

2 Likes
#6

I don’t understand where ‘event’ variable come from, I has review the lesson about events but I didn’t find any reference to the need of call an event handler function using a variable in this way.
This was the example I refered to:

let eventHandlerFunction = function() {
// this block of code will run
}
eventTarget.onclick = eventHandlerFunction;

#7

Hey.
I have the exact same problem, and the exact same code as this guys has, but I don’t get how you answer apperently solved the problem. Could you explain it plainly?

1 Like
#8
const pressKeys = function(note) {
  note.onmousedown = function() {
    keyPlay(event);
  }
   note.onmouseup = function()  {
    keyReturn(event);
  }
}

Are you asking about the event parameters?

#9

Did not get it. :frowning: I am giving up. I need code as the solution.

#10

Can you give me the solution? I am completely exausted :frowning:

#11

Оk, got it. :slightly_smiling_face: In the video the code worked with function() without parameter in ().

#12

There would have to be an explanation for that, such as different browser support of a global event object, perhaps. The argument is given in the calls, but not supplied in the parameter so must come from somewhere. That’s why I suggested put it into the parameter. Can’t say for sure without further research.

1 Like