title: Uncaught ReferenceError: (XXXXXXX) is not defined
body: <p>I think I found the shortest javascript code that could trigger the error &quot;Uncaught ReferenceError: (XXXXXXX) is not defined&quot;</p>
  <p>The Javascript code I used is:</p>
  <pre><code>
      const canvas = document.querySelector('canvas')
      const c = canvas.getContext('2d')
      canvas.width = innerWidth
      canvas.height = innerHeight
  
      class Player {
        constructor(x, y, radius, color) {
          this.x = x
          this.y = y
          this.radius = radius
          this.color = color
        }
        draw() {
          c.beginPath()
          c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, (false))
          c.fillStyle = this.color
          c.fill()
        }
      }
  
  
      class Projectile {
        constructor(x, y, radius, color, velocity) {
          this.x = x
          this.y = y
          this.radius = radius
          this.color = color
          this.velocity = velocity
        }
  
        draw() {
          c.beginPath()
          c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, (false))
          c.fillStyle = this.color
          c.fill()
        }
  
      }
  
  
      const x = canvas.width / 2
      const y = canvas.height / 2
      const player = new Player(x, y, 30, 'blue')
      player.draw()
  
  
      addEventListener('click', (event) =&gt; {
        const projectile = new Projectile(event.clientX, event.clientY, 5, 'red', null)
      })
  
  
      projectile.draw()
  
  </code></pre>
  <p>The HTML code I used is:</p>
  <pre><code>
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
  
      &lt;head&gt;
        &lt;title&gt;Page Title&lt;/title&gt;
      &lt;/head&gt;
      &lt;style&gt;
        body {
          margin: 0;
        }
      &lt;/style&gt;
  
      &lt;body&gt;
  
        &lt;canvas&gt;&lt;/canvas&gt;
      &lt;/body&gt;
  
      &lt;/html&gt;
  
  </code></pre>
  <p>I think my website is throwing the error &quot;Uncaught ReferenceError: projectile is not defined because there is a problem somewhere along in this part of the javascript code here...</p>
  <pre><code>
  addEventListener('click', (event) =&gt; {const projectile = new Projectile (event.clientX, event.clientY, 5, 'red', null)})
  
  
      projectile.draw()
  
  </code></pre>
  <p>I don't understand. The <code>const</code> projectile is clearly there on the third code snippet but why my website failed to see it. Is my website blind? (LOL!)</p>
  <p>I don't understand why. I'm dazed and confused.</p>
  <p>I was just following this tutorial on how to make games. The time stamp where I slumped is in minute 23:00 out of 1 hour, 56 mins and 49 seconds of this video...</p>
  <p><a href="https://i.stack.imgur.com/YKI90.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YKI90.png" alt="wtf" /></a></p>
  <p>Thank you all!</p>
  <p>The enlarged version is here:</p>
  <p><a href="https://i.stack.imgur.com/gMDQ2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gMDQ2.png" alt="enter image description here" /></a></p>
  <p>Edit: The correct Javascript code so that you won't have the &quot;Uncaught ReferenceError: (XXXXXXX) is not defined&quot; error is:</p>
  <pre><code>
  
  const canvas = document.querySelector('canvas')
  const c = canvas.getContext('2d') 
  canvas.width = innerWidth
  canvas.height = innerHeight
  
  class Player {
      constructor(x, y, radius, color) {
          this.x = x
          this.y = y
          this.radius = radius
          this.color = color
      }
      draw() {
          c.beginPath()
          c.arc(this.x, this.y, this.radius, 0, Math.PI * 2,  (false))
          c.fillStyle = this.color
          c.fill()    
      }
  }
  
  
  class Projectile {
      constructor(x, y, radius, color, velocity){
          this.x = x
          this.y = y
          this.radius = radius
          this.color = color
          this.velocity = velocity
      }
  
      draw() {
          c.beginPath()
          c.arc(this.x, this.y, this.radius, 0, Math.PI * 2,  (false))
          c.fillStyle = this.color
          c.fill()    
      }
  
  }
  
  
  const x = canvas.width / 2
  const y = canvas.height / 2
  const player = new Player (x, y, 30, 'blue')
  player.draw()
  
  
  
  
  addEventListener('click', (event) =&gt; 
      {
          const projectile = new Projectile (event.clientX, event.clientY, 5, 'red', null)
          projectile.draw()
      }
  )
  </code></pre>
  <p>The <code>const</code> projectile must be inside the <code>addEventListener</code> function so that it won't throw an error....:-)</p>