Piano Keys

[bit7444714303]

Regarding the Piano Keys Pro Project in the DOM events with Javascript module
https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/dom-javascript-events/projects/piano-keys

I’ve been tripped up by Instructions 4-5. I’ve seen that I’m not the first but my question is different to the others I’ve seen.

My code works but I don’t understand why. The full code is included below but the bit I don’t understand is my eventAssignment function:

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

as ‘event’ hasn’t been defined and the only variable eventAssignment has recieved is note why am I not writing keyPlay(note) instead of keyPlay(event).

I feel like I’ve missed something fundamental.

Thankyou in advance for any help

Edit
I’ve replaced all usage of event with ‘thingy’ in my code and it no longer works, so “event” clearly has some specific syntactical magic that I’ve somehow missed. where is this explained?

event replacement with thingy:

const keyPlay = function(thingy) {
  thingy.target.style.backgroundColor = '#90EE90';
}
const keyReturn = function(thingy) {
  thingy.target.style.backgroundColor = '';
}
let eventAssignment = function(note){
  note.onmousedown = function(){
    keyPlay(thingy);
  }
  note.onmouseup = function(){
    keyReturn(thingy);
  }
}

main.js:

// 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 = '#90EE90';
}
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);
  }
}

// Write a loop that runs the array elements through the function
notes.forEach(eventAssignment);

// These variables store the buttons that progress the user through the lyrics
let nextOne = document.getElementById('first-next-line');
let nextTwo = document.getElementById('second-next-line');
let nextThree = document.getElementById('third-next-line');
let startOver = document.getElementById('fourth-next-line');

// This variable stores the '-END' lyric element
let lastLyric = document.getElementById('column-optional');

// These statements are "hiding" all the progress buttons, but the first one
nextTwo.hidden = true;
nextThree.hidden = true;
startOver.hidden= true;

// Write anonymous event handler property and function for the first progress button


// Write anonymous event handler property and function for the second progress button


// Write anonymous event handler property and function for the third progress button


// This is the event handler property and function for the startOver button
startOver.onclick = function() {
  nextOne.hidden = false;
  startOver.hidden = true;
   document.getElementById('word-one').innerHTML = 'HAP-';
  document.getElementById('letter-note-one').innerHTML = 'G';
  document.getElementById('word-two').innerHTML = 'PY';
  document.getElementById('letter-note-two').innerHTML = 'G';
  document.getElementById('word-three').innerHTML = 'BIRTH-';
  document.getElementById('letter-note-three').innerHTML = 'A';
  document.getElementById('word-four').innerHTML = 'DAY';
  document.getElementById('letter-note-four').innerHTML = 'G';
  document.getElementById('word-five').innerHTML = 'TO';
  document.getElementById('letter-note-five').innerHTML = 'C';
  document.getElementById('word-six').innerHTML = 'YOU!';
  document.getElementById('letter-note-six').innerHTML = 'B';
}

[janneslohmeijer]

event is the object that is “created” upon your action, in this case onmousedown and onmouseup.

To visualise this lets add another line of code within your function:

  note.onmousedown = function(){
    console.log(event) // <-- this one
    keyPlay(event);
  }

Now save your progress and open the console in your browser (through the inspector or developer tools).

Initiate a click on a key and see what is being printed. You should see something like this:

mousedown { target: section#f-key.key, buttons: 1, clientX: 319, clientY: 256, layerX: 319, layerY: 256 }

Telling us, mousedown is the event with properties such as target, and coordinates.

Your keyPlay function then accesses the target property of this event and changes the css styling

const keyPlay = function(event) {
  event.target.style.backgroundColor = '#6df0c2'; // <-- here 
}

Hope this helps

[bit7444714303]

I understand now, Thank you so much!

[janneslohmeijer]

You are very welcome! Happy coding!