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);
2 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.

1 Like

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.