Slightly confused on why my code do not work

Welcome to the Get Help category!

This is where you can ask questions about your code. Some important things to remember when posting in this category :slight_smile:

  • Learn how to ask a good question and get a good answer!
  • Remember to include a link to the exercise you need help with!
  • If someone answers your question, please mark their response as a solution :white_check_mark:
  • Once you understand a new concept, come back and try to help someone else!

I would like to know why this code do not work, where it says “Write a named function with event handler properties” & “Write a loop that runs the array elements through the function”.

When i have a look at the walk through video, i notice a variable is decleared before the function, but on the excercise the instruction did not state decleare a variable before a name function.

Hence i would proceed with the below code, for somereason when i take this off line and run it on my VSCODE, i then proceed to debug via console, and i find out the error says “Uncaught ReferenceError: colorNote is not defined”, my question is why?, is there something i am missing or not understanding in my code?

// 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(colors){
  colors.target.style.backgroundColor = '#8B4513';
}

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

// Write a named function with event handler properties
let note = (colorNote)=> {
  keyPlay.addEventListener('mousedown', colorNote);
  keyReturn.addEventListener('mouseup', colorNote);
}

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

I would like to know why this code do not work, where it says "Write a named function with event handler properties" & "Write a loop that runs the array elements through the function". 

When i have a look at the walk through video, i notice a variable is decleared before the function, but on the excercise the instruction did not state decleare a variable before a name function.

Hence i would proceed with the below code, for somereason when i take this off line and run it on my VSCODE, i then proceed to debug via console, and i find out the error says "Uncaught ReferenceError: colorNote is not defined", my question is why?, is there something i am missing or not understanding in my code?

// 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(colors){
colors.target.style.backgroundColor = ‘#8B4513’;
}

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

// Write a named function with event handler properties
let note = (colorNote)=> {
keyPlay.addEventListener(‘mousedown’, colorNote);
keyReturn.addEventListener(‘mouseup’, colorNote);
}

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

In the code in the post, the problem is this line:

The colorNote variable earlier in the code is defined only inside the note function (as an argument of the function).
The scope of that variable is the note function. colorNote doesn’t exist outside that function.

You would call that note function for each element in the notes array,
so you could do

notes.forEach(note); 

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.