Piano Keys Project HELP!

Get Help JavaScript
#1

Hi, I’m starting the Piano Keys project which is focused on DOM events, and I’m already confused at steps 4-6. I don’t understand why we do this:

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

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

My original idea was to do this:

const eventAssignment = (note) => {
  note.onmousedown = keyPlay;
  note.onmouseup = keyReturn;
}

notes.forEach(function(key) {
  eventAssignment(key);
});

Need help!!!

Here’s the full HTML and Javascript files:
Javascript:

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

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

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

// Write a loop that runs the array elements through the function
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';
}

HTML:

<!DOCTYPE html>
<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
#2

hi

I am have the same concern why we dont call the function direct instead we are calling through another anonymous function.

const eventAssignment = (note) => { 
  note.onmousedown = function() {
    keyPlay(event);
  };
  note.onmouseup = function() {
    keyReturn(event);
  };
}

A little light on this matter please why the following is an issue

let eventAssignment = function(note){
  note.onmousedown = keyPlay;
  note.onmouseup = keyReturn;
  
}

kind regards

#3

I don’t see where it says it needs to be in the specific format in your first example:

const eventAssignment = (note) => { 
  note.onmousedown = function() {
    keyPlay(event);
  };
  note.onmouseup = function() {
    keyReturn(event);
  };
}

The text just says:

Inside the function, create an event handler that runs the keyPlay as an event handler when a mousedown event fires on any note .

I just interpreted that as:

const playNote = note => {
  note.addEventListener('mousedown', keyPlay);
  note.addEventListener('mouseup', keyReturn);
}

But what does it matter? You’re not validated on what you enter so complete the project how you see fit.

#4

Hi
I was following the video Codeacademy provided for help in that video step 4 instructor mentioned clearly not to do that, Then i put the post asking what is the reason for that because my approach was the following after completing the exercise.

let eventAssignment = function (note) {
    note.onmousedown = keyPlay;
    note.onmouseup = keyReturn;
}

Following is the video link where he is explaining this point (like if we do this way it will redefine this function???) Did we cover this is in our course so far. How someone knows which way is the right way.
Step 4

Cheers

#5

Okay I see his point though in this particular scenario it doesn’t matter so much. Yeah I think it was covered before which is why you should use addEventListener where possible so you don’t redefine anything.

One sec, I’ll try and find the lesson

Edit: lesson found: link

It’s mentioned at the bottom though not in the exact same words as the guy in the video:

You’ll want to use the .addEventListener() method to allow multiple event handlers to be registered to a single event without changing its other event handlers.

Actually nevermind, I don’t get the video either. I confused myself with my own solution and what the video is doing.

I could be wrong but it looks like in the video he’s doing exactly what he said not to do. Isn’t assigning function() {} redefining the onmousedown property? I added another mousedown function in the same manner, and the bottom function takes precedence, the text changed and not the colour.

const playNote = note => {
  note.onmousedown = function() {
    keyPlay(event);
  }
  note.onmouseup = function() {
    keyReturn(event)
  }

  note.onmousedown = function() {
    note.innerHTML = '*';
  }
}
#6

So use .addEventListener to keep it is simple. The videos CodeAcademy have uploaded sometimes there are new concept getting introduced so as a beginer no experience of the market (Junior) we have no idea what just happened. I dont mind they telling us in the video new things “like this is the way you can write this piece of code”. But they should stick to the chapters we just have covered before that project (to complete the project).

Reason why in my case i have to finish the course quickly (i have timescale to finish this course). But when stuck somewhere becuase somthing new got introduced then how this happened i research for atleast a day to undetstand. One thing leads to another thing. I am writing all this feedback so upcoming videos the instructor need to know what concept he/she can introduced to write the code. If there is better way they introduce it but comment that extra piece of code.

example: syntax to write a function. Not sayig right same code 3 times but stick to the beginer level approach using previouse chapter knowledge.

  1. function (){}
  2. () =>{}
  3. const myfunction = () => {};

thanks

1 Like
#7

Can someone check to see why my “Reset” button isn’t showing up? I checked the steps as I went along, and don’t seem to miss anything. Any help/ pointers/ comments will be appreciated.

Link to exercise:
https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/dom-javascript-events/projects/piano-keys

// 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 = 'cyan';
};
function keyReturn(event) {
  event.target.style.backgroundColor = '';
};
// Write a named function with event handler properties
let eventAssignment = 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(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-';
  
  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';

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

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

Hello, @a0uney

Compare some working onclick event code, such as nextTwo.onclick, where it properly hides and shows a button, to the code that is supposed to show your Reset button in nextThree.onclick

Click for another hint

The first two lines of both of those blocks of code is what hides a button and shows another. Look closely at the datatype you are using in each of them