CODEWITHSUNDEEP
javascriptdomdom-events
Malik Abdullah
Malik Abdullah

Reputation: 29

Javascript Syntax Confussion

// 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 = "#ababab"; 
}
const keyReturn = function(event){
event.target.style.backgroundColor = ""; 
}
// Write a named function with event handler properties
function eventAssignment(note){
note.onmousedown = keyPlay;
note.onmouseup = function(){
    keyReturn(event);
}
}

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

LINE-17 and LINE-18 serve similar purposes by triggering event handlers well the instructor tells me not to use this syntax at LINE-17 even though it works fine. he sort of mentions something which completely hops over my mind "we can't define note.onmousedown to the keyPlay function as it would just redefine the function (i have no idea which function is he referring to as being redefined)"

Any help would be appreciated.

Upvotes: 0

Views: 39

Answers (1)

Oleksandr Demian
Oleksandr Demian

Reputation: 21

First line will call keyPlay directly on mouse down, meanwhile the second one will create a function that then will call keyReturn. The second line is actually wrong as event is undefined (you have to declare it in function's input). I prefer the first line as it allows you to keep code cleaner.

Upvotes: 1

Related Questions