Events Handling - Piano Keys


#1

Hi
May any body help or share code for Event handling “Piano Keys” project.
I have done first six steps but its not giving desired outcomes.
Code link is as follows.


#2

Had to track down this project,

Piane Keys

and did the first six steps. to catch up to where you are.

Talking points…

let keyplay = function() {
  event.target.style.backgroundcolor = 'green';
}

The instructions give us the name, keyPlay which is what we should use so as not to stray from given directions.

Also mentioned in the instructions is how to write CSS in JavaScript.

background-color    =>  CSS
backgroundColor     =>  JavaScript

Most importantly, we cannot pull event out of thin air. It needs to be in the parameter list. The callback has access to the event object which is what event refers to.

It’s not a sticking point, but when I write callbacks as named functions they are written as declarations so they get hoisted.

function keyPlay(event) {
  event.target.style.backgroundColor = 'green';
}

Same applies to keyReturn.

If we write this named function as a declaration, it too will be hoisted.

function assignKey(note) {
  note.onmousedown = keyPlay;
  note.onmouseup = keyReturn;
}

Now we can move the notes.forEach up to where the keys.forEach is, but first we need to fix it…

notes.forEach(asingment(note));

Above we are assigning an undeclared variable as the argument. This will throw an excetion. Recall that .forEach takes a function or function expression. That’s where note will come from.

notes.forEach(function (note) {
    return assignKey(note);
};

We can write both of these at the top because the callback in the second one is hoisted. It won’t matter where in the source listing it is written.

keys.forEach(function(key){
  notes.push(document.getElementById(key));
})
notes.forEach(note => assignKey(note));

#3

Thanks for your reply it finally worked, Now i am progressing to next steps. will let your know if i stuck somewhere.