PIANO KEYS Project - JavaScript - why click not working?

// 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 = function(event){
event.target.style.backgroundColor = ‘blue’;
}
const keyReturn= function(event){
event.target.style.backgroundColor = ‘’;
}
// Write a named function with event handler properties
const eventAsssign = function(note){
note.addEventListener(‘mousedown’,
keyPlay);
note.addEventListener(‘mouseup’,
keyReturn);

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

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

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

lastLyrics.style.display = ‘inline-block’;
}

// Write anonymous event handler property and function for the third progress button
nextThree.onclick = function(){
nextThree.hidden = false;
nextstartOver.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’;
document.getElementById

lastLyrics.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’;
}

You have some typos in the code
const eventAsssign should be const eventAssign
and the } to end the function is missing.

Also, in
lastLyrics.style.display = 'inline-block'; and in lastLyrics.style.display = 'none';
lastLyrics should be lastLyric

And
nextstartOver.hidden = true;
should be
startOver.hidden = true;

You also have a line that says
document.getElementById but nothing else, which could cause an error

And you have

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

Check whether you are making the correct elements appear and disappear there.


Note that you can check for some of the errors by using the browser's console (which is often in the "Tools" or "Developer Tools" or "more tools" menu).
1 Like

The code you provided seems to have a few errors and typos that are causing issues. Here’s a corrected version of the 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
const keyPlay = function(event) {
  event.target.style.backgroundColor = 'blue';
};

const keyReturn = function(event) {
  event.target.style.backgroundColor = '';
};

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

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

// 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 lastLyrics = 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';

  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';

  lastLyrics.style.display = 'inline-block';
};

// Write anonymous event handler property and function for the third progress button
nextThree.onclick = function() {
  nextThree.hidden = false;
  startOver.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';

  lastLyrics.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';
};

Make sure you fix the curly quotes (‘’) in your code to regular single or double quotes ('' or ""). Also, ensure that your HTML markup matches the IDs you are using in the JavaScript code. <pagar beton>

Thank you, all sorted now :slight_smile:

One more question, please!

Looking at the html code I don’t see any reference to any link providing the key sounds - how would that be put together?
I mean each key being pressed to correspond to the right note to be played - would there be more links or just one added?
Thanks :slight_smile:

Thank you, mistakes corrected, all good now :slight_smile:

It would need to be done on your local machine since we cannot add files to the LE. On the web one would source the WAV files:

wav files of piano key notes - Google Search

Once you’ve got them unpacked, copy the notes you want to use and paste them in a ‘notes’ folder adjacent to your html, css and script files.

You’ll be accessing and playing the respective note inside the handler which means knowing the target element of the event and determining which sound matches that note.

Obviously it is a larger task than could or should be included in the course, but it is doable. Set it aside for now and complete the course, first so you don’t lose momentum. It will make a great side project when you are ready to take on the extra challenge for practice and skill development.

1 Like

Thank you, sounds like a good plan :slight_smile:

1 Like