Piano Keys help

I’m working on the Piano Keys Project as part of the Web Developer track: https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/dom-javascript-events/projects/piano-keys

For steps 4 and 5, I’ve written my code differently than in the Get Help video. However mine works while the code from the video does not, and I don’t fully understand why.

Here is my code:

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

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

notes.forEach(pressKey);

// 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');


let wordFive = document.getElementById('word-five');
let wordSix = document.getElementById('word-six');

let lastLyric = document.getElementById('column-optional');

let letterNoteThree = document.getElementById('letter-note-three');
let letterNoteFour = document.getElementById('letter-note-four');



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

nextOne.onclick = function() {
nextTwo.hidden = false;
nextOne.hidden = true;
document.getElementById('letter-note-five').innerHTML = "D";
document.getElementById('letter-note-six').innerHTML = "C";
};


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

nextTwo.onclick = function() {
nextThree.hidden = false;
nextTwo.hidden = true;
wordFive.innerHTML = "DEAR";
wordSix.innerHTML = "FRI-";
lastLyric.style.display = "inline-block";
letterNoteThree.innerHTML = "G";
letterNoteFour.innerHTML = "E";
letterNoteFive.innerHTML = "C";
letterNoteSix.innerHTML = "B";
};


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

let wordOne = document.getElementById('word-one');
let wordTwo = document.getElementById('word-two');
let wordThree = document.getElementById('word-three');
let wordFour = document.getElementById('word-four');

let letterNoteOne = document.getElementById('letter-note-one');
let letterNoteTwo = document.getElementById('letter-note-two');


nextThree.onclick = function() {
lastLyric.style.display = 'none';
startOver.hidden = false;
nextThree.hidden = true;
wordOne.innerHTML = "HAP-";
wordTwo.innerHTML = "PY";
wordThree.innerHTML = "BIRTH";
wordFour.innerHTML = "DAY";
wordFive.innerHTML = "TO";
wordSix.innerHTML = "YOU!";
letterNoteOne.innerHTML = "F";
letterNoteTwo.innerHTML = "F";
letterNoteThree.innerHTML = "E";
letterNoteFour.innerHTML = "C";
letterNoteFive.innerHTML = "D";
letterNoteSix.innerHTML = "C";
};





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

Are you saying that the video runs some code and shows an error in the video?

No, for these steps I have written:

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

However the video says to write this code below instead. It says NOT to just write “keyPlay”, that we need to pass in instead a function which triggers the function “keyPlay” using an anon function

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

When I tried using this code from the video, my piano keys do not change color.

You still need to pass event as the input argument for keyPlay.

Could you please explain why I would have to pass in event again if I have already defined my event handler function like so:

const keyPlay = function(event) {
  event.target.style.backgroundColor = "red";
};

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

I stand corrected. You are right. I assumed event had to passed, but I was wrong :wink: .

Happy coding!

Thanks for clearing that up - so would I be right in saying that either way is correct?

const keyPlay = function(event) {
  event.target.style.backgroundColor = "red";
};

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

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

and

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

Found the answer to your question on this thread:

Hope it helps :slight_smile:

1 Like

Thank you, that was helpful! :slightly_smiling_face:

1 Like