Piano Keys Step 6: code hasn't allowed key to change color on mouseclicks

Get Help JavaScript
#1

I’ve done what I thought was the addEventListener as taught in the lessons, but for whatever reason it’s not working.

It also doesn’t help that the instructional video aid has the guy doing a different version of addEventListener that allows the function to take a parameter. I added a parameter to my function, but maybe that’s the reason why it’s not working? I really am not sure what I’ve added (or not) that’s causing the error. I’ve also checked Devtools but still cannot find the error.

Thanks in advance

// 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 = (event) => {
  event.target.style.backgroundColor = "red";

  const keyReturn = (event) => {
    event.target.style.backgroundColor = "";
  }

// Write a named function with event handler properties
const keyStuff = (note) => {
  note.addEventListener("mousedown", keyPlay(note));
  note.addEventListener("mouseup", keyReturn(note));
};

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

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

Since you wrote it as keyPlay(note) and keyReturn(note), you’re invoking the function before passing it to addEventListener. So instead of addEventListener receiving the function that it can call itself, you’ve passed it the return value of keyPlay(note) and keyReturn(note), which is undefined because they don’t return anything on their own. You need to only pass in the function name: keyPlay and keyReturn

Also, it looks like you’re missing a curly brace in this block of code:

keyPlay is missing the end curly brace } so the code block for that function is larger than you intend

#3

great! thank you! I have to keep an eye out for those pesky syntax mistakes