Piano Keys

Hello, I am working on the Piano Keys project and have worked through step 7. At this point, when I click on a piano key, it is supposed to change color. But it does not. I have gone over my code and I don’t know what I did wrong. Can someone help? Here is my 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 = 'red';
}

const keyReturn = function(event) => {
  event.target.style.backgroundColor = '';
}
// Write a named function with event handler properties
const pressKeys = function(note) {
  note.onmousedown = function(event) {
    keyPlay(event);
  }
   note.onmouseup = function(event)  {
    keyReturn(event);
  }
}
// Write a loop that runs the array elements through the function
notes.forEach(pressKeys);

1 Like

Can I have your HTML code please? I don’t have Pro so I can’t check it out

2 Likes

I don’t use the HTML Code at all in the project (or at least, not where I am at now). but here is the code already provided

<html lang="en" >

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <p class='title'>Piano Player</p>
  <p id='demo'>Follow the song below to play  the piano.</p>
  <section class="piano">
    <section id='c-key' class="key">
      <section class='keynote'>C</section>
    </section>
    <section id='c-sharp-key' class="black-key">
      <section class='black-keynote'>C#</section>
    </section>
    <section id='d-key' class="key">
      <section class='keynote'>D</section>
    </section>
    <section id='d-sharp-key' class="black-key">
      <section class='black-keynote'>D#</section>
    </section>
    <section id='e-key' class="key">
      <section class='keynote'>E</section>
    </section>
    <section id='f-key' class="key">
      <section class='keynote'>F</section>
    </section>
    <section id='f-sharp-key' class="black-key">
      <section class='black-keynote'>F#</section>
    </section>
    <section id='g-key' class="key">
      <section class='keynote'>G</section>
    </section>
    <section id='g-sharp-key' class="black-key">
      <section class='black-keynote'>G#</section>
    </section>
    <section id='a-key' class="key">
      <section class='keynote'>A</section>
    </section>
    <section id='a-sharp-key' class="black-key">
      <section class='black-keynote'>A#</section>
    </section>
    <section id='b-key' class="key">
      <section class='keynote'>B</section>
    </section>
    <section id='high-c-key' class="key">
      <div class='keynote'>C</div>
    </section>
  </section>

  <section id='lyrics'>
    <section id='column-one'>
      <section id="word-one">HAP-</section>
      <section id="letter-note-one">G</section>
    </section>
    <section id='column-two'>
      <section id="word-two">PY</section>
      <section id="letter-note-two">G</section>
    </section>
    <section id='column-three'>
      <section id="word-three">BIRTH-</section>
      <section id="letter-note-three">A</section>
    </section>
    <section id='column-four'>
      <section id="word-four">DAY</section>
      <section id="letter-note-four">G</section>
    </section>
    <section id='column-five'>
      <section id="word-five">TO</section>
      <section id="letter-note-five">C</section>
    </section>
    <section id='column-six'>
      <section id="word-six">YOU</section>
      <section id="letter-note-six">B</section>
    </section>
    <section id='column-optional' class='column-optional'>
      <section id="word-optional">END</section>
      <section id="letter-note-optional">A</section>
    </section>

    <button id="first-next-line">Line 2</button>
    <button id="second-next-line">Line 3</button>
    <button id="third-next-line">Line 4</button>
    <button id="fourth-next-line">Reset</button>
  </section>

  <script  src="main.js"></script>

</body>
</html>

1 Like

Have the same issue. How did it solve out?

I think you wrote your event handler code for the key press wrong. You appear to be writing new functions for what has to happen when the mouse button is pressed down and for when it is released. You have already written these functions. You just need to call them.

I have both events within the same function

const keyStroke = function(note) {
note.onmousedown = keyPlay;
note.onmouseup = keyReturn;
};

I’m having a similar problem. When I reached step 7, it was working (yay!!) and then I added more code afterwards and now nothing works. Any ideas? I’ve retyped code, tried to double check everything, but I’m still feeling very puzzled. Here is my 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 = 'green';
}

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

// Write a named function with event handler properties
let tapKeys = function(note) {
 note.onmousedown = function() {
   keyPlay(event);
 }
 note.onmouseup = function() {
   keyReturn(event);
 }
}

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

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

Had the same issue. I checked the walkthrough video. Then did everything in accordance to it. I’m doing such projects in my editor (Atom). So i even tried to copy the block into Codecademy editor page. Tried to do it with function() notation and with arrow notation. And it still didn’t work. So what i did? I’ve re-written it… And now it works. :thinking:

// Write named functions that change the color of the keys below
const keyPlay = event => {
  event.target.style.backgroundColor = 'teal';
}
const keyReturn = event => {
  event.target.style.backgroundColor = '';
}

// Write a named function with event handler properties
const keysPush = note => {
  note.onmousedown = () => {
    keyPlay(event);
  }
  note.onmouseup = () => {
    keyReturn(event);
  }
}

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

I found this project a bit messy! I felt like the wording was pretty hard to get through the project. I also expected the piano keys to actually function. By the end I felt disconnected to the project, which might have had an impact on the outcome.

7 Likes

I can’t help but agree. In my opinion, the lesson prior to this did not provide a sufficient understanding of the .target method, and there is very little explanation given for the functions you are writing here. The video tutorial blows through the functions, and doesn’t follow the same methods that we were taught in the DOM lessons. Can’t say that I’m impressed by this project.

4 Likes

Did you click save before trying it? Silly question but several times i’ve forgotten to click save before running the code. Works once saved.

I completely agree that this project is not a good fit for the lessons that came before it. I continue struggling to understand why Codecademy chooses projects that don’t actually use the lessons they’ve just taught. I have understood every single element leading up to this project, and I’m lost. So, don’t feel bad. I don’t think it’s you. I think it’s bad prep.

5 Likes

Totally agree, i am on step 7 and already i am feeling lost, i felt like i have learned nothing. :pensive:

5 Likes

try it 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 eventHandler(note) {

note.onmousedown = keyPlay;

note.onmouseup = keyReturn;
//note.onmouseout = keyReturn;

}

// Write a loop that runs the array elements through the function

notes.forEach(key => eventHandler(key));

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

}

The error is in your code:
=>
you have syntax errror. You don’t need the arrow sign in this named function.
const keyPlay = function(event) => {
event.target.style.backgroundColor = ‘red’;
}

const keyReturn = function(event) => {
event.target.style.backgroundColor = ‘’;
}

1 Like

Me also. Some of these CC projects are really well put together but others such as this and ‘chore door’ ESSPECIALLY are just far too frustrating. I keep finding the fun being sucked out when it comes to the ‘project’ when I’ve fully grasped what the lessons have taught. There comes a point when I cant bang my head against the proverbial wall anymore.

2 Likes

I think, this project is quite boring and meaningless.

2 Likes

I studied a lot everything that came before and I simply don’t feel prepared to make this project. It makes me feel sad and frustrated that such thing happens. There should be more explanation about what .target does.

2 Likes

Yeah, making my way through the FullStack course, these ‘tick-off-your-own-progress’ tasks nearly always feel poorly conceived. I feel like I’m making good progress and understanding everything, and then one of these assignments pops up and makes me want to give up, and go live under a rock.

Why not stick with the system that checks our progress at each stage?
Why remove the option to compare our code to the solution?
Why do the support videos always use a different method to that which we’ve been shown?
Why not rectify these assignments when so many people clearly hate them?

2 Likes
const keyPlay = () => {
  notes.forEach((key) => {
    key.addEventListener('mousedown' , () => {
      key.style.backgroundColor = 'grey' ;
    })
  })
} ;

const keyReturn = () => {
  notes.forEach((note) => {
    note.addEventListener('mouseup' , () => {
      note.style.backgroundColor = '' ;
    })
  })
} ; 

// ------- task 5 --------
namedFunction = note => {
  note.addEventListener('mousedown' , keyPlay) ;
  note.addEventListener('mouseup' , keyReturn) ;
} ;

// ------- task 6 --------
notes.forEach((key) => {
  namedFunction(key) ;
}) ;

This challenge needs updating. The solution in the walkthrough does not work because event was deprecated when being used like this:

const keysPush = note => {
note.onmousedown = () => {
keyPlay(event);
}

1 Like