Piano Player Keys Issue

Greetings! as the tittle says, I am facing an issue with the Piano Player. Keys don’t even react to the mouse, even after adding the forEach loop. I watched the tutorial and despite having some mistakes that I corrected thanks to the Walkthrough, I find myself unable to make my keys change color.

Here is my code so far:

// 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
function keyPlay(play){
  play.target.style.backgroundColor = 'red';
}

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

// Write a named function with event handler properties
function keyPress(note){
  
  note.onmousedown = function(){
    keyPlay(play);
  }
  
  note.onmouseup = function(){
    keyReturn(play);
  }

};

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

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

And here is the Walkthrough solution. I have been looking at it for quite a while, trying to understand where my mistake is, I found I don’t need to pass in the parameter on the forEach loop. I also didn’t realize I had notes as a parameter in keyPlay and keyReturn, error I fixed but nothing really changed.

Could someone help me find what’s wrong? I am frustrated to the point I am not efficient anymore.

I would check the console (right click and inspect element). I don’t remember if you have to set it up in your own local environment but I think you should still be able to do it in the CC env.

The reason I say this is that this is that it’s super useful to catch whether intended actions are happening or not, and if they are: how they’re happening. I would put tracer statements in parts of the code you suspect aren’t working to try to pin down where the issue is.

The biggest downside of following tutorials is that they don’t prepare you for something which is just as important as writing the code… debugging the code. That’s why I suggest going this route first. Then when you have an problem area isolated it’s easier to tackle, and get help for if necessary.

Remember, at any point in time you can interact with the console interactively, like in if with this code you type keys into the console, it should return

['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']

maybe there should be a little lesson earlier in the CC webdev path that explains this earlier as I find it to be an immensely useful, instructive, and time-saving tool. (I forget if they have it, and since I haven’t gone through the whole thing I don’t know if they put it later).

1 Like

Nothing to set up. It’s already there. CC’s environment is running in our client. The inspector should be able to see everything in state.

1 Like

Don’t know why, but somehow play conflicted as a parameter. Changed it for…names I don’t wanna say here and now it works. Edited then the parameter and renamed it to para and worked. Realized the problem was play as it said it was undefined. By the way, Thank you both, Pita and mtf! Wouldn’t have realized it was the paramater without the advice. Guess I will mark this as the solution!

2 Likes