Piano Keys: Document Reference Error

Web Development
1

Hello, I am hitting a roadblock with the Piano Keys project. According to the AI assistant, and referencing the walkthrough video, my code through Task 6 should function correctly:

// 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 = 'lightorange';
}
const keyReturn = function(event) {
  event.target.style.backgroundColor = '';
}
// Write a named function with event handler properties
const keyChange = function(note) {
  note.onmousedown = function(event) {
    keyPlay(event);
  }
  note.onmouseup = function(event) {
    keyReturn(event);
  }
}
// Write a loop that runs the array elements through the function
notes.forEach(keyChange);

However, this error consistently arises regardless:

/home/ccuser/workspace/dom-events-piano-keys/main.js:5
  notes.push(document.getElementById(key));
             ^

ReferenceError: document is not defined
    at /home/ccuser/workspace/dom-events-piano-keys/main.js:5:14
    at Array.forEach (native)
    at Object.<anonymous> (/home/ccuser/workspace/dom-events-piano-keys/main.js:4:6)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.runMain (module.js:605:10)
    at run (bootstrap_node.js:427:7)

The Learning Assistant gives the following explanation:

It seems you are encountering a ReferenceErrorbecause the code is attempting to usedocumentin a Node.js environment wheredocumentis not defined since it’s specific to web browsers. To fix this error, you should adjust your code to run in a browser environment, not in a Node.js environment. Sincedocument is not available in Node.js, you would need to run this code in an HTML file with appropriate script tags.

I have no reason to believe the code provided when starting the project is incorrect, and the script element is at the bottom of the html body sourcing ‘main.js’.

This error has been persisting throughout the lessons in the ‘Building Interactive JavaScript Websites’ skill path course, but this is the first time events haven’t triggered.

2

What’s the entire code? Is the variable document getting re-assigned?

4

I am working in the default workspace provided by the Codecademy project, and I have access to an index.html file, and a style.css file in the code editor.
This are the responses the assistant gives when asked about this:

AI Talk
AI Talk554×671 36.9 KB

5

Here is the full code for both the main.js and index.html:
JavaScript:

> // 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 = 'lightorange';
> }
> const keyReturn = function(event) {
>   event.target.style.backgroundColor = '';
> }
> // Write a named function with event handler properties
> const keyChange = function(note) {
>   note.addEventListener('mousedown', keyPlay);
>   note.addEventListener('mouseup', keyReturn);
> }
> // Write a loop that runs the array elements through the function
> notes.forEach(keyChange);
> 
> // 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';
> }

I do not believe document is being re-assigned, since, to my knowledge, document is simply used to reference the dom in order to modify elements on the web page.

6

HTML:

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <p class='title'>Piano Player</p>
  <p id='demo'>Follow the song below to play  the piano.</p>
  <section class="piano">
    <section id='c-key' class="key">
      <section class='keynote'>C</section>
    </section>
    <section id='c-sharp-key' class="black-key">
      <section class='black-keynote'>C#</section>
    </section>
    <section id='d-key' class="key">
      <section class='keynote'>D</section>
    </section>
    <section id='d-sharp-key' class="black-key">
      <section class='black-keynote'>D#</section>
    </section>
    <section id='e-key' class="key">
      <section class='keynote'>E</section>
    </section>
    <section id='f-key' class="key">
      <section class='keynote'>F</section>
    </section>
    <section id='f-sharp-key' class="black-key">
      <section class='black-keynote'>F#</section>
    </section>
    <section id='g-key' class="key">
      <section class='keynote'>G</section>
    </section>
    <section id='g-sharp-key' class="black-key">
      <section class='black-keynote'>G#</section>
    </section>
    <section id='a-key' class="key">
      <section class='keynote'>A</section>
    </section>
    <section id='a-sharp-key' class="black-key">
      <section class='black-keynote'>A#</section>
    </section>
    <section id='b-key' class="key">
      <section class='keynote'>B</section>
    </section>
    <section id='high-c-key' class="key">
      <div class='keynote'>C</div>
    </section>
  </section>

  <section id='lyrics'>
    <section id='column-one'>
      <section id="word-one">HAP-</section>
      <section id="letter-note-one">G</section>
    </section>
    <section id='column-two'>
      <section id="word-two">PY</section>
      <section id="letter-note-two">G</section>
    </section>
    <section id='column-three'>
      <section id="word-three">BIRTH-</section>
      <section id="letter-note-three">A</section>
    </section>
    <section id='column-four'>
      <section id="word-four">DAY</section>
      <section id="letter-note-four">G</section>
    </section>
    <section id='column-five'>
      <section id="word-five">TO</section>
      <section id="letter-note-five">C</section>
    </section>
    <section id='column-six'>
      <section id="word-six">YOU</section>
      <section id="letter-note-six">B</section>
    </section>
    <section id='column-optional' class='column-optional'>
      <section id="word-optional">END</section>
      <section id="letter-note-optional">A</section>
    </section>

    <button id="first-next-line">Line 2</button>
    <button id="second-next-line">Line 3</button>
    <button id="third-next-line">Line 4</button>
    <button id="fourth-next-line">Reset</button>
  </section>

  <script src="main.js"></script>

</body>
</html>