Need some insight on project Piano Keys

So I’ve got to the project Piano Keys and I’ve been coding and following the code along and testing new things but I’m confused why certain aspects work. If someone could explain why certain parts of this code works it’d be nice :smiley:

// 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 = "turquoise";

};

const keyReturn = (event) => {

    event.target.style.backgroundColor = "";

};

// Write a named function with event handler properties

// let keyAssignment = (note) => {

//     note.onmousedown = () => {

//         keyPlay(event);

//     };

//     note.onmouseup = () =>{

//         keyReturn(event);

//     }

// };

let keyAssignment = (note) => {

    note.onmousedown = keyPlay;

    note.onmouseup = keyReturn;

};

// let keyAssignment = (note) => {

//     note.onmousedown = function() {

//         keyPlay(event);

//     };

//     note.onmouseup = function() {

//         keyReturn(event);

//     };

// };

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

notes.forEach(keyAssignment);

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

}

My question is why does the code work

let keyAssignment = (note) => {

    note.onmousedown = keyPlay;

    note.onmouseup = keyReturn;

};

because in the walkthrough they use a parameter event for the keyPlay and keyReturn like this:

let keyAssignment = (note) => {
    note.onmousedown = function() {
        keyPlay(event);
    };
    note.onmouseup = function() {
        keyReturn(event);
    };
};

I just want to know what’s the best way to code for this? or maybe if it’s for readability?
Or if I should use my code

let keyAssignment = (note) => {

    note.onmousedown = () => {

        keyPlay(event);

    };

    note.onmouseup = () =>{

        keyReturn(event);

    }

};

Just need some clarification if you could please and thank you!

It works because you are passing a reference to a function to call. keyPlay is a reference to the function. keyPlay(arg) is calling the function.

() => { keyPlay(event) } is a function that calls keyPlay and then passes in event. This is wrong it should be event => { keyPlay(event)} because otherwise ask yourself, where is event coming from? Either way it is a function that hasn’t been called, so the assignment is a reference to this function. event => { keyPlay(event) }(arg) would be calling the function straight after creating it. Or the next step would be const callKeyPlay = event => { keyPlay(event) } so callKeyPlay now stores the reference to the function and we call it like so callKeyPlay(arg).

So basically you are passing in a reference to a function that can be called elsewhere, where it will have an event argument passed in. You are not calling the function at assignment time.

1 Like

so it should be this instead?

let keyAssignment = (note) => {

    note.onmousedown = keyPlay(event);

    note.onmouseup = keyReturn(event);

};

No, keyPlay(event) would call keyPlay once and return undefined. You should just leave it as keyPlay, so the function gets passed in and can be called inside onmousedown.

1 Like