Codecademy Forums

DOM Events with JavaScript parameter or interpretation problem

I doing on Codeacademy 6. section Piano project but not understand how it works.
Please say me what I misunderstand. Thank you

keys >> an array with strings these will be id of DOM elements
notes >> these will store the DOM elements itself the anonymus function care for it:

keys.forEach(function(key){
  notes.push(document.getElementById(key));
})

Function keyPlay:
This recieve an Object.( event) But I don’t know exactly what is??? It should be an Event Object
This Object have a target property that use as an interface to DOM so I can access the DOM element.
style.backgroundColor >> I can change with this the css properties now the color

const keyPlay = function(event){
    event.target.style.backgroundColor='blue'; }

Function keyReturn:
Very same only return the default color

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

Function eventAssigment:
This recieve an Object.
This Object is one for notes array so this Object is a DOM element.
For this DOM element’s properties - onmousedown - assigned an anonymus function
that call an another function - keyPlay -
and pass for them an parameter -event- !!!
Main Question: But where do you get it from???
I haven’t this global or local variable! This should be an eventObject…
My basic logic:
event = note.onmousedown and then I can pass somewhere…

const eventAssigment = function(note){
note.onmousedown = function(){
    keyPlay(event);}

So then we connect all DOM elements in notes array to keyPlay and keyReturn function help with eventAssigment function
notes.forEach(eventAssigment);

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

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

Hey @milan77,

You are right on track on figuring it out ;).

The event refers to the action being done by the user. This can be a click, pressing the mouse, releasing the mouse etc.

In this case you have written two functions used to simulate pressing and releasing a key on a piano:

const keyPlay = function(event){ 
    event.target.style.backgroundColor='blue';    
}
const keyReturn  = function(event){
    event.target.style.backgroundColor='';
}

You then call those functions later on:

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

So how does this work? That is your question.

Upon calling the functions it first has to establish what the event is. This is done in the note.onmousedown and note.onmouseup part. It then passes this event into the keyPlay and keyReturn functions respectively.

And now some magic happens. The earlier functions chain this event to a que that finds out which element this event was applied to target followed by a chained action to change the background color.

event.target.style.backgroundColor='blue';

Hope this enlightens things for you :wink: Happy coding!

1 Like