Piano Keys Projects steps 4 and 5

Hello,
I am quite confused by these two steps and it’s been bothering me for a while. It saying inside a function that takes in note as a parameter, create an event handler that runs keyPlay on mousedown and keyReturn on mouseup. I did it as note.addEventListener('mousedown', keyPlay); and note.addEventListener('mouseup', keyReturn); but then when I check the tutorial video to check my work, these event handlers are instead passed in as part of the body of a anonymous function instead of the way the tutorials had showed us. For example, instead of writing note.addEventListener('mousedown', keyPlay); or note.onmousedown = keyPlay, the video shows it written as note.onmousedown = function() {keyPlay(event)}. Can someone explain why my code is wrong? Or does it still work the same?

Thank you

// 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(e) {
  e.target.style.backgroundColor = 'green';
}
function keyReturn(e) {
  e.target.style.backgroundColor = '';
}

// Write a named function with event handler properties

function eventAssign(note) {
  **note.addEventListener('mousedown', keyPlay);**
**  note.addEventListener('mouseup', keyReturn);**
}

1 Like

Is there other code that we cannot see? There would appear to be a loop running over the notes that isn’t evident, above.

The task to make a loop is task #6 so I haven’t gotten to that one just yet, as I need to do these two steps first. There is a pre-written .forEach iterator towards the beginning of the document that the Codecademy person who made the exercise put up top.

If you would like the full document, as it is right now before it’s completion, here it is:

// 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(e) {
  e.target.style.backgroundColor = 'green';
}
function keyReturn(e) {
  e.target.style.backgroundColor = '';
}

// Write a named function with event handler properties

function eventAssign(note) {
  note.addEventListener('mousedown', keyPlay);
  note.addEventListener('mouseup', keyReturn);
}

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


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

Okay; wasn’t sure what I was seeing there. Could you link us to the exercise page where one can get our bearings? Please.

No problem, here is the link

Piano Keys Project

1 Like

Given my suspicions, are we clear what that function is doing?

Yes, this is function takes a note parameter and uses it as an event target by applying the addEventListener method. Then based on which of the two events occur on this target, either the keyPlay or the keyReturn event handler function is applied to it.

Good. So we’re aware of the event registering process, then?

Yup, I also considered using onmouseup & onmousedown but since the addEventListener method gives more flexibility, I went that route.

So I can just go with my solution then correct? It functions the same way as the solution in the video tutorial.

Did you work this out? I came to the exact same issue.

1 Like

The code for actually adding the eventListener for each element in the notes array was left out of the code above,
after

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

Yeah, I worked it out in the end mate. Thank you

Hello Team i had similar issue the keys are not chnaging color not sure what i am doing wrong . can anyone help please.
here is my code
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 = “#FFFF00”;
}

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

function event() {
keyPlay.addEventListener(“mousedown”, notes);
keyReturn.addEventListener(“mouseup”, notes);
}

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

notes.forEach(eventAssingment);

// These variablencs 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;

Most of the code is fine, but there’s a problem with the function that assigns event-handlers.

There’s an inconsistency there:
you have event as the name of the function, but you had eventAssingment in the .forEach( )
Also, that event or eventAssignment function needs a parameter - the element you want to add the event to.
and
keyPlay.addEventListener("mousedown", notes);
has keyPlay and notes in the wrong places.
The format should be:
element.addEventListener("mousedown", function);

possible code
function eventAssingment(note) {
  note.addEventListener("mousedown", keyPlay);
  note.addEventListener("mouseup", keyReturn);
}

Assignment is misspelled as Assingment

1 Like

Thank you for the reply will try that