DOM events with Javascript, Piano Keys

hey!
I was working on project Piano Keys, up to step 7 where when I press the key (mousedown) is should change the background color and back to it’s original color when I leave the key (mouseup) but my code is not working can you check and tell me why?

// 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) {
events.target.style.backgroundColor = ‘black’
};

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

// Write a named function with event handler properties
let eventAssignment = function(note) {
notes.onmousdown = function() {
keyPlay(events)
};
notes.onmouseup = function() {
keyReturn(events);
};
};

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

Hey! I’m not sure this syntax you use for the named functions is correct. I’ve never seen it written this way, I kind feel like maybe you mixed the notations? Like, I’d write:

const keyPlay = (event) => {
events.target.style.backgroundColor = ‘black’ 
};

or

function keyPlay(event) {
events.target.style.backgroundColor = ‘black’ // ALSO this 'event' I suppose is singular?
};

Does that make sense? Hope it did :slight_smile:

fixed both functions and corrected ‘event’ 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 function keyPlay(event) { event.target.style.backgroundColor = 'black' }; function keyReturn(event) { event.target.style.backgroundColor = '' }; // Write a named function with event handler properties function eventAssignment(note) { notes.onmousdown = function() { keyPlay(event) }; notes.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'; }
notes.onmousdown = function() {
  keyPlay(event)
};```

note vs. notes, as you had event vs. events b4
maybe try and check your variables (I don't recall this exercise in such fine details) and see if maybe there are unused variables or stuff like that. I like this site, it helps when I've tried so many things that I can't see straight anymore: https://jshint.com/

if still doesn't work, let me know, I'll help if I can =]

and still not working I’m literally out of options here. is there something I’m not seeing?

// 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 = ‘#00008B
};

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

// Write a named function with event handler properties
function eventAssignment(note) {
note.onmousdown = 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’;
}

There’s a typo here. You are missing an ‘e’ in ‘onmousedown’ which may be the reason your function doesn’t get called.

You seem to keep using plural forms of the function’s parameters when you reference them in your function bodies. I’m not sure where this confusion comes from, possibly from using parameter names that aren’t descriptive enough. It might be worth going over function declarations and how to pass in arguments, again.

Also, it feels odd for me to use = function() { because I get the feeling we’d be assigning this function, instead of running it. I believe you should just call the named function you’ve already declared, like:
note.onmousedown = keyPlay(event);

1 Like

finally its working I kept checking and I can’t believe I kept missing the typo lol
thank you very much

1 Like

^^ This is perfect :slight_smile:

1 Like

The .onmousedown property only needs a reference. It will be invoked by the handler.

note.onmousedown = keyPlay;
2 Likes