# Having a button become visible when a wayspot is found

**URL:** <https://forum.8thwall.com/t/having-a-button-become-visible-when-a-wayspot-is-found/816>\
**Category:** Technical Support\
**Created:** [March 21, 2024, 4:02pm UTC](https://forum.8thwall.com/t/having-a-button-become-visible-when-a-wayspot-is-found/816 "2024-03-21T16:02:00Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Richard\_de\_Mowbray](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/richard_de_mowbray/32/193_2.png) [@Richard\_de\_Mowbray](https://forum.8thwall.com/u/Richard_de_Mowbray)\
**Post date:** [March 21, 2024, 4:02pm UTC](https://forum.8thwall.com/t/having-a-button-become-visible-when-a-wayspot-is-found/816/1 "2024-03-21T16:02:00Z")

</div>

Hi,  
I’ve made a button to emit a call to start A-frame animation of .glb.  
It works fine, but I now want it to only be visible when the wayspot is found. I declared it before my a-scene in body.html.  
button id=“startAnimationButton” class=“hidden”\>Lift the stone\</button

in main.css I defined .hidden and .block  
}

.hidden {

display: none;

}

.block {

display: block;

}

And then in app.js I added some event listeners to show the button when the wayspot was found  
import ‘./main.css’

import {startAnimationComponent} from ‘./start-Animation’

AFRAME.registerComponent(‘animation-start-button’, startAnimationComponent)

document.addEventListener(‘DOMContentLoaded’, () =\> {  
window.addEventListener(‘xrloaded’, () =\> {  
// Setup event listener for wayspot found event to show the button  
window.addEventListener(‘xrprojectwayspotfound’, () =\> {  
// Show the button when the wayspot is found  
const startButton = document.getElementById(‘startAnimationButton’)  
if (startButton) {  
startButton.style.display = ‘block’  
}

```
  // Update or create the text entity to display "Wayspot Found!"
  const sceneEl = document.querySelector('a-scene')
  let messageEl = document.getElementById('wayspotMessage')

  // If the text entity does not exist, create it
  if (!messageEl) {
    messageEl = document.createElement('a-text')
    messageEl.setAttribute('id', 'wayspotMessage')
    messageEl.setAttribute('position', '0 2 -4') // Adjust position as needed
    messageEl.setAttribute('align', 'center')
    sceneEl.appendChild(messageEl)
  }

  // Update the message
  messageEl.setAttribute('value', 'Wayspot Found!')
})

```

})  
})

and made a start-Animation component that emits the ‘beginAnimation’ event.

const startAnimationComponent = {  
init() {  
const btn = document.getElementById(‘startAnimationButton’)  
const box = document.getElementById(‘testCube’)  
const handleClick = () =\> {  
console.log(‘animation activated!’)  
box.emit(‘beginAnimation’)  
}  
btn.addEventListener(‘click’, handleClick)  
},  
}

export {startAnimationComponent}

However I don’t see the button when the wayspot loads in. Any thoughts on mistakes I’ve made or how to approach this?

---

<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 21, 2024, 5:22pm UTC](https://forum.8thwall.com/t/having-a-button-become-visible-when-a-wayspot-is-found/816/2 "2024-03-21T17:22:29Z")

</div>

The problem could related to the `DOMContentLoaded` / `xrloaded` event listeners you’ve wrapped your code with. Also, the `xrprojectwayspotfound` event is emitted on the scene element, not the `window`.

Try something like this instead:

```auto
const startAnimationComponent = {
  init() {
    // Setup event listener for wayspot found event to show the button
    this.el.sceneEl.addEventListener(‘xrprojectwayspotfound’, () => {
      // Show the button when the wayspot is found
      const startButton = document.getElementById(‘startAnimationButton’)
      startButton.style.display = ‘block’
    })
  },
}

export {startAnimationComponent}

```

---

<div class="post-metadata">

**Author:** ![Richard\_de\_Mowbray](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/richard_de_mowbray/32/193_2.png) [@Richard\_de\_Mowbray](https://forum.8thwall.com/u/Richard_de_Mowbray)\
**Post date:** [March 22, 2024, 11:11am UTC](https://forum.8thwall.com/t/having-a-button-become-visible-when-a-wayspot-is-found/816/3 "2024-03-22T11:11:00Z")

</div>

Thanks Evan,  
I tried and got error messages at line 8 , about the comma. Took that out, still an issue. Added a bracket on line 7 with the comma in and the build seemed fine. Does that make sense to you?

const startAnimationComponent = {  
init() {  
// Setup event listener for wayspot found event to show the button  
this.el.sceneEl.addEventListener(‘xrprojectwayspotfound’, () =\> {  
const startButton = document.getElementById(‘startAnimationButton’)  
startButton.style.display = ‘block’  
})  
},  
}

export {startAnimationComponent}

---

<div class="post-metadata">

**Author:** ![Richard\_de\_Mowbray](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/richard_de_mowbray/32/193_2.png) [@Richard\_de\_Mowbray](https://forum.8thwall.com/u/Richard_de_Mowbray)\
**Post date:** [March 22, 2024, 11:13am UTC](https://forum.8thwall.com/t/having-a-button-become-visible-when-a-wayspot-is-found/816/4 "2024-03-22T11:13:22Z")

</div>

p.s. how do I paste in code like you did above?

---

<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 25, 2024, 10:11pm UTC](https://forum.8thwall.com/t/having-a-button-become-visible-when-a-wayspot-is-found/816/5 "2024-03-25T22:11:49Z")

</div>

Ah yes - updated the code snippet. There was a missing closing parentheses on line 8.

You can add code snippets by clicking the \</\> icon in the text editor.

---

<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:07pm UTC](https://forum.8thwall.com/t/having-a-button-become-visible-when-a-wayspot-is-found/816/6 "2024-05-14T22:07:42Z")

</div>

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