Piano Keys Help

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
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?

3 Likes

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

2 Likes

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

3 Likes

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

@alyssavigil, N.B.

2 Likes

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;

3 Likes

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
const pressKeys = function(note) {
  note.onmousedown = function() {
    keyPlay(event);
  }
   note.onmouseup = function()  {
    keyReturn(event);
  }
}

Are you asking about the event parameters?

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

2 Likes

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

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

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.

2 Likes

Why do we need to pass in the event parameters?

Why can’t we set the event handlers to the name of the function? Why do we have to set it to another function? In the lessons we are taught to set it to the variable. Then the rules change without explanation.

Here is an example from lesson 4 in DOM Events with JS

let open = function() {
  codey.style.display = 'block';
  close.style.display = 'block';
};

let hide = function() {
  codey.style.display = 'none';
  close.style.display = 'none';
};

view.onclick = open;
close.onclick = hide;

Whats the difference? Why does the lesson checker accept only this syntax but in the project the program won’t work without the other syntax? The inconsistency is making it really hard to understand.

If I understand your question it is to do with these two lines?

Partly because it is convenience and readability, and partly it is so the callback functions are independent and may be called from elsewhere in the program in response to perhaps another type of event.

The two lines above register the callback function to trigger when an event is detected. We only give the references, and the handler then invokes the function as needed.

Aside

To protect the integrity of your functions, use const so they can not be removed or overwritten.

Also, please post a link to this exercise so we can see what is being asked for and check for any issues.

Hi, I’m not stuck but I need to get an understanding for step 4. Apparently, you cannot just “call” keyPlay, but you have to create an anonymous function. What is the reason for this? I have been confused for a long time now…

I thought the same when I watched the video. They guys said that he called the function within an anonymous function so that the named function’s value wasn’t reassigned.
This wasn’t the case in the learning videos but then we also didn’t assign const to our functions and I’m wondering if this makes the difference somewhere.

I am facing the same issue too. With or without a paramenter my code doesnt seem to want to light up those 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 = ‘#99ccff
}

const keyReturn = function(event){
event.target.style.backgroundColor = ‘’
}

// Write a named function with event handler properties

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

just FYI - const notes = empty array

Hi all,
My name is Allie Newton, and I’m currently working on the piano keys project. I also am having an issue somewhere in my code for steps 2-6. Currently, the keys do change color but they don’t change back to default at all! :frowning_face: Here’s all my code for steps 1 through 6:

// Write named functions that change the color of the keys below

const keyPlay = (event) => {

return event.target.style.backgroundColor = “#25be59”;

}

const keyReturn = (event) => {

return event.target.style.backgroundColor = “”;

}

// Write a named function with event handler properties

let eventAssignment = (note) => {

return note.onmousedown = function() {

return keyPlay(event);

}

return note.onmouseup = function() {

return keyReturn(event);

}

}

// Write a loop that runs the array elements through the function

notes.forEach(eventAssignment);

Can someone please tell me what I’m doing wrong?! Thanks! :slightly_smiling_face:

Good day

It seems in your eventAssignment you have multiple returns, the code is executed from top to bottom, as soon as the first return is executed the rest of the functions are not run. i.e. your mouseup. Try this:

let eventAssignment = (note) =>

{

note.onmousedown = function() {

keyPlay(event);

}

note.onmouseup = function() {

keyReturn(event);

}

}

I am also having trouble with this one. I tried it on my own and it did not work, so I followed the video walk-through and coded LINE-BY-LINE with the video and it still did not work. Can anyone help me with this?

// 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.backgroundColor = 'red';

}

const keyReturn = function(event) {

  event.target.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);