Some issue with ID's needing to be capitalized?

🧑‍💻 Technical Support
1

I feel like I’m beginning to loose my mind. Why does this code work:

Body.html:

  <a-entity
    id="Pork"
    gltf-model="#pork"
    scale="1 1 1"
    shadow="receive: false"
    position="0 2 -5"
    rotation="0 90 45"
    class="cantap">
  </a-entity>

JavaScript:

const presstest = {
  init() {
    const debugCube = document.getElementById('Pork')
    debugCube.addEventListener('click', () => {
      console.log('DebugCube clicked!')
    })
  },
}
export {presstest}

But this doesn’t:

Body.html:

  <a-entity
    id="pork"
    gltf-model="#pork"
    scale="1 1 1"
    shadow="receive: false"
    position="0 2 -5"
    rotation="0 90 45"
    class="cantap">
  </a-entity>

JavaScript:

const presstest = {
  init() {
    const debugCube = document.getElementById('pork')
    debugCube.addEventListener('click', () => {
      console.log('DebugCube clicked!')
    })
  },
}
export {presstest}

Note that the only change is the ID and it’s reference in the javascript from ‘Pork’ to ‘pork’.

2

When everything is in lowercase, the script can’t distinguish between the #pork asset and the pork element ID, because under the hood, both are treated like IDs in HTML, accessed using the # symbol. This means that when it’s all lowercase, you’re either losing your asset reference or your entity ID reference, as one will override the other.

1 Like