Piano Keys Project (Step 13)

Good Afternoon,

i’ve hit a snag on step 13 of the Piano Keys project. I have codified this particular step(step 13) in the same manner as the previous ones that require the student to make the button respond to clicks. However the website doesn’t respond to a second click. I read some where that there can only be 1 event happening at a time on the website.

So am i supposed to be removing the ‘nextOne’ event listener when I want to click the same button again and have it do something else? I pushed this code into VSC on my laptop and there are no errors arising.

Here is my code for reference.

// Write anonymous event handler property and function for the first progress button const next = () => { nextTwo.style.hidden = false; nextOne.style.hidden = true; document.getElementById('letter-note-five').innerHTML = 'D'; document.getElementById('letter-note-six').innerHTML = 'C'; }; nextOne.addEventListener('click',next); // Write anonymous event handler property and function for the second progress button const nextLine = () => { nextThree.style.hidden = false; nextTwo.style.hidden = true; document.getElementById('word-five').innerHTML = 'DEAR'; document.getElementById('word-six').innerHTML = 'FRI-'; lastLyric.style.display = 'inline-block'; }; nextTwo.addEventListener('click',nextLine);

Nope, just hide it with hidden = false and reveal the next one with hidden = true. We are not removing the event listener, only hiding the button the event is bound to. The event listener is essentially paused for the hidden buttons.

Step 13 requires us to manually change the text content of word-five and word-six. We will also be revealing the hidden last syllable, `END.

nextTwo.onclick = function() {
  this.hidden = true;
  nextThree.hidden = false;
  document.getElementById('word-five').innerHTML = 'DEAR';  // this line
  document.getElementById('word-six').innerHTML = 'FRI-';  // this line
  lastLyric.style.display = 'inline-block';  // this line

I believe I have done this, though I am defining the information within a function and calling it in an event listener. This is okay I presume because it is one way of applying what you have done with the .onevent method. Why is my code stopping though? The first next line works but the second does not.

We’ll need to see all your code. Please post raw formatted code, not the Codebyte. We can’t run it, anyway.

// 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 = (keys) => {
  keys.target.style.backgroundColor = 'blue';
};
const keyReturn = (keys) => {
  keys.target.style.backgroundColor = '';
};
// Write a named function with event handler properties
const changeColor = (note) => {
  note.addEventListener('mousedown',keyPlay);
  note.addEventListener('mouseup', keyReturn);
};
// Write a loop that runs the array elements through the function
notes.forEach(changeColor);
// 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
const next = () => {
  nextTwo.style.hidden = false;
  nextOne.style.hidden = true;
  document.getElementById('letter-note-five').innerHTML = 'D';
  document.getElementById('letter-note-six').innerHTML = 'C';
};
nextOne.addEventListener('click',next);
// Write anonymous event handler property and function for the second progress button
const nextLine = () => {
  nextThree.style.hidden = false;
  nextTwo.style.hidden = true;
  document.getElementById('word-five').innerHTML = 'DEAR';
  document.getElementById('word-six').innerHTML = 'FRI-';
  lastLyric.style.display = 'inline-block';
};
nextTwo.addEventListener('click',nextLine);
// 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';
}