Piano Keys not making sense

Web Development
1

Here is my code up until Task 7 and the code doesn’t work. The browser doesn’t do anything. What am I doing wrong???

// 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 = green;
}

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

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

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

2

To preserve code formatting in forum posts, see: [How to] Format code in posts

In your keyAssignment function, you wrote 'mousedup' instead of 'mouseup'.

3

Thanks, yeah I caught and corrected that typo. Code still doesn’t work the problem is something else.

4

Without proper formatting, it is difficult to spot potential issues.

Did you write

event.target.style.backgroundColor = green;

instead of

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

?

5

Your link is unfortunately broken.

6

I couldn’t find what ‘Task 7’ is but you can try this.

PS you can look in the console for any error messages the code (may) generated.

To open the DevTools console

  • Chromium/Chrome/Edge/Opera
    • Ctrl + Shift + J
  • Firefox / Pale Moon
    • Ctrl + Shift + K
// 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 = [""]; // REPLACE THIS WITH YOUR '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 = "green"; }; const keyReturn = function(event) { event.target.style.backgroundColor = ""; }; // Write a named function with event handler properties const keyAssignment = () => { this.addEventListener("mousedown", keyPlay); this.addEventListener("mouseup", keyReturn); }; // Write a loop that runs the array elements through the function notes.forEach(keyAssignment);

Have a wonderful day :slightly_smiling_face:

7

Codecademy conducted some forum maintenance and cleanup since the time of that post.

Another link that is still active: How do I format code in my posts?

8

Archiving of any forum content that was used to train their AI. It won’t come up in search. Their AI is smartly spewing our original content from the past decade. No corroboration necessary, nor idea sources.

At least in the forums, we knew whose code and expressive ideas were being posted. Learners took from that what they took. Now, learners have no idea of where the idea came from that brought about that line of thinking. AI is completely dumbing down introspective logical thinking. They can neither recognize code that could fail, nor the logic behind the code that is not.