I can’t figure out why my code is not working. I worked through step 6 and my keys don’t change colors.
// 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 = 'red';
}
const keyReturn = function(event) {
event.target.style.backgroundColor = '';
}
// Write a named function with event handler properties
const pressKeys = 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(pressKeys);
I don’t understand where ‘event’ variable come from, I has review the lesson about events but I didn’t find any reference to the need of call an event handler function using a variable in this way.
This was the example I refered to:
let eventHandlerFunction = function() {
// this block of code will run
}
eventTarget.onclick = eventHandlerFunction;
Hey.
I have the exact same problem, and the exact same code as this guys has, but I don’t get how you answer apperently solved the problem. Could you explain it plainly?
There would have to be an explanation for that, such as different browser support of a global event object, perhaps. The argument is given in the calls, but not supplied in the parameter so must come from somewhere. That’s why I suggested put it into the parameter. Can’t say for sure without further research.
Why can’t we set the event handlers to the name of the function? Why do we have to set it to another function? In the lessons we are taught to set it to the variable. Then the rules change without explanation.
Here is an example from lesson 4 in DOM Events with JS
let open = function() {
codey.style.display = 'block';
close.style.display = 'block';
};
let hide = function() {
codey.style.display = 'none';
close.style.display = 'none';
};
view.onclick = open;
close.onclick = hide;
Whats the difference? Why does the lesson checker accept only this syntax but in the project the program won’t work without the other syntax? The inconsistency is making it really hard to understand.
If I understand your question it is to do with these two lines?
Partly because it is convenience and readability, and partly it is so the callback functions are independent and may be called from elsewhere in the program in response to perhaps another type of event.
The two lines above register the callback function to trigger when an event is detected. We only give the references, and the handler then invokes the function as needed.
Aside
To protect the integrity of your functions, use const so they can not be removed or overwritten.
Also, please post a link to this exercise so we can see what is being asked for and check for any issues.
Hi, I’m not stuck but I need to get an understanding for step 4. Apparently, you cannot just “call” keyPlay, but you have to create an anonymous function. What is the reason for this? I have been confused for a long time now…
I thought the same when I watched the video. They guys said that he called the function within an anonymous function so that the named function’s value wasn’t reassigned.
This wasn’t the case in the learning videos but then we also didn’t assign const to our functions and I’m wondering if this makes the difference somewhere.
I am facing the same issue too. With or without a paramenter my code doesnt seem to want to light up those keys.
Hi all,
My name is Allie Newton, and I’m currently working on the piano keys project. I also am having an issue somewhere in my code for steps 2-6. Currently, the keys do change color but they don’t change back to default at all! Here’s all my code for steps 1 through 6:
// Write named functions that change the color of the keys below
It seems in your eventAssignment you have multiple returns, the code is executed from top to bottom, as soon as the first return is executed the rest of the functions are not run. i.e. your mouseup. Try this:
I am also having trouble with this one. I tried it on my own and it did not work, so I followed the video walk-through and coded LINE-BY-LINE with the video and it still did not work. Can anyone help me with this?
// 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.backgroundColor = 'red';
}
const keyReturn = function(event) {
event.target.backgroundColor = '';
}
// Write a named function with event handler properties
const pressKeys = 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(pressKeys);