# Reference is Null, p5 load order?

**URL:** <https://discourse.processing.org/t/reference-is-null-p5-load-order/17330>\
**Category:** Beginners\
**Created:** [January 25, 2020, 6:13pm UTC](https://discourse.processing.org/t/reference-is-null-p5-load-order/17330 "2020-01-25T18:13:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Skranker](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@Skranker](https://discourse.processing.org/u/Skranker)\
**Post date:** [January 25, 2020, 6:13pm UTC](https://discourse.processing.org/t/reference-is-null-p5-load-order/17330/1 "2020-01-25T18:13:27Z")

</div>

Hello,

at the moment i am trying to reference a div object from my index.html witin the p5 sketch but i keep getting an object is null error. ![Capture](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a6c8ce0d6be921fb69ac67ce0c3dd5772df6cfb9.png)

I think this happens because the script is loaded too early and the object has not been set up in html yet.

What is the best way to fix this?

If i simply move the p5 scripts to the bottom of the page, it does not appear to read them and tells me the function does not exist.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/009ded59cfd0ead031eb2fd014dd55edecf64264.png)

the Code:

**p5**

```auto
var projectContainer = document.getElementById('projectContainer');

function setup() {
projectContainer.hide();
}

```

**HTML**

```auto
  <div id="projectContainer"></div>

```

thanks in advance,  
Skranker

---

<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:** [January 25, 2020, 7:16pm UTC](https://discourse.processing.org/t/reference-is-null-p5-load-order/17330/2 "2020-01-25T19:16:24Z")

</div>

> [@Skranker](#):
>
> `projectContainer.hide();`

**hide()** is a method from class [p5.Element](https://p5js.org/reference/#/p5.Element): [reference | p5.js](http://p5js.org/reference/#/p5.Element/hide)

However your variable _projectContainer_ refers instead to an [HTMLDivElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement) object:

> [@Skranker](#):
>
> `var projectContainer = document.getElementById('projectContainer');`

In order to get a [p5.Element](https://p5js.org/reference/#/p5.Element) wrapper object, use **select()** inside **setup()**: [reference | p5.js](http://p5js.org/reference/#/p5/select)

`projectContainer = select('#projectContainer');`

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [January 25, 2020, 9:26pm UTC](https://discourse.processing.org/t/reference-is-null-p5-load-order/17330/3 "2020-01-25T21:26:54Z")

</div>

This could be relevant: [[SOLVED] Accessing html elements defined into .html file?](https://discourse.processing.org/t/solved-accessing-html-elements-defined-into-html-file/2701)

Make sure you are including p5.dom.js as it is not clear in the code you provided.

Kf

---

<div class="post-metadata">

**Author:** ![Skranker](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@Skranker](https://discourse.processing.org/u/Skranker)\
**Post date:** [January 26, 2020, 1:22am UTC](https://discourse.processing.org/t/reference-is-null-p5-load-order/17330/4 "2020-01-26T01:22:05Z")

</div>

Thanks, that fixed it. I just kind of assumed that p5 and html elements are the same thing.

Ended up using` div.style.display` since the p5 method` show()` seems to reset the style to the default inline, and i wanted to use a different one.

Problem solved.