Piano Keys (DOM-events)

Hi there,

I don’t understand why my code is not working. It worked fine up to about step 8 of the exercise .

Here´s the whole thing:

// 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 (event handler function)
const keyPlay = function(event) {
  event.target.style.backgroundColor ='grey';

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

// Write a named function with event handler properties
let eventAssign = function(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

nextOne.onclick = function() {
  nextTwo.hidden = false;
  nextOne.hidden = true;
  letter-note-five.innerHTML = "D";
  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;
  word-five.innerHMTL = "DEAR";
  word-six.innerHTML = "FRI-";
  lastLyric.style.display = "inline-block";
  letter-note-three.innerHTML = "G";
  letter-note-four.innerHTML = "E"
  letter-note-five.innerHTML = "C";
  letter-note-six.innerHTML = "B";

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

nextThree.onclick = function() {
  startOver.hidden = false;
  nextThree.hidden = true;
  word-one.innerHTML = "HAP-";
  word-two.innerHTML = "PY";
  word-three.innerHTML = "BIRTH";
  word-four.innerHTML = "DAY";
  word-five.innerHTML = "TO";
  word-six.innerHTML = "YOU!";
  letter-note-one.innerHTML = "F";
  letter-note-two.innerHTML ="F";
  letter-note-three.innerHTML = "E";
  letter-note-four.innerHTML = "C";
  letter-note-five.innerHTML = "D";
  letter-note-six.innerHTML = "C";
  lastLyric.style.display = "none";

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

Can you guys help me spot the mistake, please? Thanx :slight_smile:

Did you check the console for errors? I got an error on this line:

  letter-note-five.innerHTML = "D";

which is line 49 (nextOne onclick function)

I think that the problem is that violate variable naming:


variables can only have underscores, letters and numbers in its name. Hyphens are not allowed.

1 Like

oh! of course. I wrote the names of the IDs as they were on the HTML. Thank you! :slightly_smiling_face:

But how do I see the console in this exercise? I thought it wasn’t available :no_mouth:

your browser has a console. Any errors and logs which you do in the lesson also show in the browser console.

the general shortcut is the f12 key, and then search for the console tab. Otherwise, right click somewhere on the page and select: inspect element/page. If you still can’t find it, i would recommend using google

The codecademy website might also give some warnings in the console, you can safely ignore those

1 Like

I was thinking about the codecademy console.
I´ll use devtools then! thanks again.

1 Like