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';
}