Issue with Piano Keys Project

Here is the link to the Piano Keys project:

At this point in the project, my code should make it possible for the keys on the keyboard to change color whenever I press on them, and return back to normal when I lift the mouse. Unfortunately that is not happening and I can’t seem to find any error in my code. Also I’m not getting any error messages :woman_shrugging:

I would really appreciate it if you could help me finding my error :pleading_face:

Here is my full 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 = [];

// Write named functions that change the color of the keys below
function keyPlay(event){ = '#000000'

// Write a named function with event handler properties
function keyReturn(event){ = '';

function connectEventKey(note){
  note.onmousedown = function(){
  note.onmouseup = function(){

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

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


I suspect it is not working because you are not passing your event.

function connectEventKey(note){
  note.onmousedown = function(event){ // pass event here
  note.onmouseup = function(event){ // and here

Also your connectEventKey function expects an argument.

notes.foreach(connectEventKey(note)) // you will have to pass note

Hope this helps.

Happy coding!

Hey, @janneslohmeijer, thanks a bunch for your help. Unfortunately, I tried that and it still doesn’t work :sob:
This is driving me nuts, I really can’t find what’s wrong with my code :sob:

Ok, how stupid that I missed this…

foreach should be forEach

and ignore what I suggested earlier

notes.foreach(connectEventKey(note)) // you will have to pass note

Just write:


Oh my gosh, thank you so much! My code works now :upside_down_face:
I can’t believe I missed that :laughing: :sob: