Cannot get a basic reference to an object

🧑‍💻 Technical Support
1

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

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)
2

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:

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

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

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

Here are some good resources for a deeper understanding:

1 Like
3

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