# Separate Files Don't Work?

**URL:** <https://discourse.processing.org/t/separate-files-dont-work/19348>\
**Category:** Beginners\
**Created:** [April 2, 2020, 6:23pm UTC](https://discourse.processing.org/t/separate-files-dont-work/19348 "2020-04-02T18:23:53Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![DaveDonnie](https://avatars.discourse-cdn.com/v4/letter/d/a9adbd/32.png) [@DaveDonnie](https://discourse.processing.org/u/DaveDonnie)\
**Post date:** [April 2, 2020, 6:23pm UTC](https://discourse.processing.org/t/separate-files-dont-work/19348/1 "2020-04-02T18:23:53Z")

</div>

I was trying to replicate something from the coding train, and I made a file called `block.js` which looks like this:

```auto
class Block {
  constructor(x,w) {
  this.x = x;
  this.y = height - w;
  this.w = w
  }
  show() {
  fill(255,10,10);
  square(this.x,this.y,this.w);
  }
}

```

The only difference between mine and his was that he had an image, and I just used a normal square. I tried to use it in `sketch.js` and the part that doesn’t work looks like this:

```auto
let block1;
let block2;

function setup() {
  createCanvas(800, 600);
//Block isn't defined apparently
  block1 = new Block(100,20);
  block2 = new Block(200,150);
}

```

The weird thing is that when I put `class Block` in `sketch.js`, it works just fine, But the coding train’s code was fine in its own file. So what went wrong?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 2, 2020, 9:30pm UTC](https://discourse.processing.org/t/separate-files-dont-work/19348/2 "2020-04-02T21:30:56Z")

</div>

Just make sure you’ve got an HTML file where “block.js” is run before “sketch.js”:

```auto
<script async src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=block.js></script>
<script defer src=sketch.js></script>

```