Piano Keys Project

Hi there, does anyone happen to know why my code isn’t working following step 6?

// 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 = ‘#ffc63f’;
}
// Write a named function with event handler properties
const keyReturn = function(event) => {
event.target.style.backgroundColor = ‘’;
}

// Write a loop that runs the array elements through the function
let eventAssignment = function(note) => {
note.onmousedown = function(event) {
keyPlay(event);
}
note.onmouseup = function(event) {
keyReturn(event);
}
}

notes.forEach(eventAssignment);

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

1 Like

I finished the remainder of steps from the project instructions, yet my code is still not working. Can someone help me figure out why?

Here is my code below:
// 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 = ‘#ffc63f’;
}

// Write a named function with event handler properties
const keyReturn = function(event) => {
event.target.style.backgroundColor = ‘’;
}

// Write a loop that runs the array elements through the function
let eventAssignment = function(note) => {
note.onmousedown = function(event) {
keyPlay(event);
}
note.onmouseup = function(event) {
keyReturn(event);
}
}

notes.forEach(eventAssignment);

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

1 Like

We cannot use the function keyword in arrow function syntax.

// arrow syntax

... = (note) => {

// normal function

... = function (note) {
1 Like

Ok i fixed that but it’s still 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 = (event) => {
event.target.style.backgroundColor = ‘#ffc63f’;
}

// Write a named function with event handler properties
const keyReturn = (event) => {
event.target.style.backgroundColor = ‘’;
}

// Write a loop that runs the array elements through the function
let eventAssignment = (note) => {
note.onmousedown = function(event) {
keyPlay(event);
}
note.onmouseup = (event) {
keyReturn(event);
}
}

notes.forEach(eventAssignment);

// 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-’;
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;
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 this one look like the one above it (add the function keyword).

Ok it worked! But are the keys meant to make a noise when you press them?

Thanks

1 Like

No, just change color as the handlers direct.

How do we add sound to the project if we want to?

You would have to write a play audio function that is triggered upon pressing a key. It will have to recognize the key and play the correct audio file. These files have to be stored somewhere on the internet and being accessible for the script.

This is the basic code for playing an audio file.

var audio = new Audio('audio_file.mp3');
audio.play();

I have some ideas but not the time a.t.m. to build something. Maybe you can manage it yourself.
I would say writing one function and one function call should be enough, on top of having the sounds stored and knowing how to source them.