Piano Keys project step 7 doesn't work as explained in the help video

Get Help JavaScript
,
1

This topic seems to be endless. As I try to accomplish the project by the instructional video, I get no results with the code provided. My keys doesn’t change color as expected. Thru the forum I still cannot find anything that would help to solve it. I’ll provide the code. Code was checked inside and outside codecademy with Chrome and Internet Explorer both showing same results. Very frustrating…

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 pressKeys = function(note) {

  note.onmousedown = function() {

    keyPlay(event);

  };

   note.onmouseup = function() {

    keyReturn(event);

  };

};

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

notes.ForEach(pressKeys);

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

Please use this link to format you code:

https://discuss.codecademy.com/t/how-do-i-format-code-in-my-posts/28351
1 Like
3 
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 pressKeys = function(note) {

note.onmousedown = function() {

keyPlay(event);
};

note.onmouseup = function() {

keyReturn(event);
};

};

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

notes.ForEach(pressKeys);

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

}
4

BTW I found my mistake. forEach() method was written as ForEach(). All works by now!

1 Like