Piano Keys, stuck on step #20

For Step #20 on the Piano Keys project I have written the line

lastLyrics.style.display = ‘none’ in my nextThree.onclick function as you can see below on the last line:

nextThree.onclick = function(){
startOver.hidden = false;
nextThree.hidden = true;

document.querySelector(’#word-one’).innerHTML = ‘HAP-’;
document.querySelector(’#word-two’).innerHTML = ‘PY’;
document.querySelector(’#word-three’).innerHTML = ‘BIRTH’;
document.querySelector(’#word-four’) = ‘DAY’;
document.querySelector(’#word-five’) = ‘TO’;
document.querySelector(’#word-six’) = ‘YOU!’;

document.querySelector(’#letter-note-one’).innerHTML = ‘F’;
document.querySelector(’#letter-note-two’).innerHTML = ‘F’;
document.querySelector(’#letter-note-three’).innerHTML = ‘E’;
document.querySelector(’#letter-note-four’).innerHTML = ‘C’;
document.querySelector(’#letter-note-five’).innerHTML = ‘D’;
document.querySelector(’#letter-note-six’).innerHTML = ‘C’;

lastLyric.style.display = ‘none’;

}

but it doesn’t do anything. The final lyric END continues to display. What should I do?

Hello, and welcome to the forums

The next step should be checking the browser’s console to see if there are any errors. If there aren’t any clues about what might be going on in there, then you could still use it by adding some logging to you function with console.log() calls and making sure the messages get printed. It can help narrow things down.

Any errors in the function would prevent the rest of the code from running. In this case, I see a few elements you’re trying to change without specifying .innerHTML

1 Like

Thanks for the reply, I fixed the few elements I had missed with .innerHTML and now it’s running.