PianoKeys, code does not work

Hi everyone,

I can’t figure out why my code does not work. Visual Studio also doesn’t find a bug neither. Through commeting out, I assume it has something to do with the document.getElementByID(' ').innerHTML =' ' code but I cant figure out why.

Thanks a lot for your help!

link to project: https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/dom-javascript-events/projects/piano-keys

// 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 = (key) => {
  key.onmousedown(key.target.style.backgroundColor ='blue')
};

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

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

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

// 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;
  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;
  document.getElementByID('word-five').innerHTML = 'DEAR';
  document.getElementByID('word-six').innerHTML = 'FRI-';
  lastLyric.style.display = "inline-block";
  document.getElementByID("letter-note-three").innerHTML = "G";
  document.getElementByID("letter-note-four").innerHTML = "E";
  document.getElementByID("letter-note-five").innerHTML = "C";
  document.getElementByID("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;
  document.getElementByID("word-one").innerHTML = "HAP-";
  document.getElementByID("word-two").innerHTML = "PY";
  document.getElementByID("word-three").innerHTML = "BIRTH";
  document.getElementByID("word-four").innerHTML = "DAY";
  document.getElementByID("word-five").innerHTML = "TO";
  document.getElementByID("word-six").innerHTML = "YOU!";
  document.getElementByID("letter-note-one").innerHTML = "F";
  document.getElementByID("letter-note-two").innerHTML = "F";
  document.getElementByID("letter-note-three").innerHTML = "E";
  document.getElementByID("letter-note-four").innerHTML = "C";
  document.getElementByID("letter-note-five").innerHTML = "D";
  document.getElementByID("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';
}

Hi!

Check the capitalisation of getElementById. You’ve done it right in some places and not in others.

1 Like

thanks for your reply. what a stupid mistake, I changed it but the words and note-words still don’t change between line 2-4.

I just pasted your code into the exercise, corrected ID to Id in all cases and it worked.

Make sure you got them all and then make sure you hit save before testing in the browser panel.

1 Like