# Cannot get a basic reference to an object

**URL:** <https://forum.8thwall.com/t/cannot-get-a-basic-reference-to-an-object/739>\
**Category:** Technical Support\
**Created:** [March 14, 2024, 7:42pm UTC](https://forum.8thwall.com/t/cannot-get-a-basic-reference-to-an-object/739 "2024-03-14T19:42:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Israel\_Alvarez](https://avatars.discourse-cdn.com/v4/letter/i/71c47a/32.png) [@Israel\_Alvarez](https://forum.8thwall.com/u/Israel_Alvarez)\
**Post date:** [March 14, 2024, 7:42pm UTC](https://forum.8thwall.com/t/cannot-get-a-basic-reference-to-an-object/739/1 "2024-03-14T19:42:59Z")

</div>

Is there some reason why this code doesn’t work? I cloned the basic Jellyfish Flyer project, added id=“jellymodel” to the jelly-glb model, and then ran the code below, which should hide the jellyfish model so I never see it. Instead, I get a “document.getElementById(…) is null”, even after wrapping the code in an onxrloaded event as recommended on this forum. I’m trying to use buttons to manage the display and hiding of various elements in an image target block, but it seems as if basic DOM functionality isn’t working for some reason

```auto
const onxrloaded = () => {
  // Run any code that you'd like to execute after the body.html is loaded.
  console.log('xrloaded start')
  document.getElementById('jellymodel').setAttribute('visible', false)
  console.log('xrloaded end')
}
window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)

```

---

<div class="post-metadata">

**Author:** ![Evan](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/evan/32/431_2.png) [@Evan](https://forum.8thwall.com/u/Evan)\
**Post date:** [March 14, 2024, 10:59pm UTC](https://forum.8thwall.com/t/cannot-get-a-basic-reference-to-an-object/739/2 "2024-03-14T22:59:05Z")

</div>

`app.js` is executed before `body.html`. Just because the 8th Wall library has loaded doesn’t mean `body.html` is done loading.

If you’re using A-Frame, you should put custom javascript inside of an A-Frame component:

```auto
// my-component.js
const myComponent = {
  init() {
    console.log('init')
    const jellymodel = document.getElementById('jellymodel')
    jellymodel.setAttribute('visible', false)
  }
}

```

```auto
// app.js
import {myComponent} from './my-component'
AFRAME.registerComponent('my-component', myComponent)

```

```html
<!-- body.html -->
<a-scene ... my-component>

```

Here are some good resources for a deeper understanding:

> **[A-Frame – Make WebVR](https://aframe.io/docs/1.5.0/introduction/writing-a-component.html)**
>
> A web framework for building virtual reality experiences. Make WebVR with HTML and Entity-Component. Works on Vive, Rift, desktop, mobile platforms.

> **[A-Frame School](https://aframe.io/aframe-school/)**
>
> The interactive course for WebVR.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/9/9212a857458f1b03a6accb129e0f8cbea408e3e5.png) [@system](https://forum.8thwall.com/u/system)\
**Post date:** [May 14, 2024, 10:06pm UTC](https://forum.8thwall.com/t/cannot-get-a-basic-reference-to-an-object/739/3 "2024-05-14T22:06:41Z")

</div>

Closed on May 14, 2024, 10:06pm UTC

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.