Piano Keys - nextThree Trigger Fails

Language Help JavaScript
1

I completed all the instructions and watched the video, but I’m struggling to figure out why my nextThree trigger doesn’t change the lyrics and notes specified in the function embedded in the nextThree.onclick trigger event.

Any help is much appreciated!

JavaScript Code:

// 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(event) {
event.target.style.backgroundColor = “green”;
}

function keyReturn (event) {
event.target.style.backgroundColor = ‘’;
}
// Write a named function with event handler properties
function assignEvents (note) {
note.onmousedown = keyPlay;
note.onmouseup = keyReturn;
}

// Write a loop that runs the array elements through the function
notes.forEach((note) => {
assignEvents(note);
})

// 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; //Opens line 3
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; //Opens line 2
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’;
lastLyric.style.display = ‘none’;
}

 Project URL:
https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-building-interactive-websites/tracks/fscj-22-building-interactive-websites/modules/wdcp-22-dom-events-with-javascript-7269280f-be52-4c87-93c0-f485ec9f4941/projects/piano-keys
2

Could that have something to do with it?

3

Hi mtf,

Thanks for responding.

The event trigger, nextThree.onclick, actually executes the buttons component of the function properly. This consists of the Booleans for startOver.hidden and nextThree. hidden. In short, the correct button (Reset) appears on the final line of the song.

The problem is the remainder of the function does not execute, resulting in static lyrics and notes from line three to four of the song, which is incorrect. I have no clue why only part of the function code is executed properly (buttons), while the rest is ignored.

-John

1 Like
4

Shouldn’t that be ‘false’ if it is supposed to be visible?

5

When the user is on line 2 of the lyrics, nextThree.hidden (aka third-next-line button) is false, so it’s visible to the user. When the user clicks through to line 3, nextThree.hidden is false and nextFour.hidden is true.

I’m ready to throw in the towel on this project. I confirmed my code by going through the instructions again and it also matches the code shown in the video walkthrough. Yet, it still doesn’t work properly since the lyrics and notes for line four incorrectly match line three.

Any suggestions before I move on?

-John

6

I’m not sure I follow. When I run my own code I get these four buttons:

line-2
line-3
line-4
line-reset

Which of those are you not getting?

7

In nextThree.onclick,

// You wrote:
document.getElementById('word-one').innerHTML('HAP-');

// It should be:
document.getElementById('word-one').innerHTML = 'HAP-';

and so on for the other statements.

Also, to preserve code formatting in forums posts, see: [How to] Format code in posts

3 Likes
8

Thank you! It works perfectly now.

The code for the prior lyric sections was fine. I don’t know what possessed me to write it differently/ incorrectly for the last page of lyrics.

1 Like
9

mtrtmk found the problem. The syntax for changing the words and notes in the startOver.onclick function was incorrect, so the last page of lyrics failed to load.

No clue why I did that since I wrote the code properly for the prior pages.

Thanks again for looking at the code.

-John

1 Like