Aframe. How to make entities appear when click in another entity

Question

I have 2 boxes in A-FRAME (0.9.2), i want to make the second box (red) appear when click on the first (green). At the beginning, the red box is not visible but i want it to appear and disappear when click in the green box.

AFRAME.registerComponent('cajaverde', {
      init: function() {
        this.el.addEventListener("click", (e) => {
          let aparecer = document.querySelector("#cajaroja")
          aparecer.setAttribute("visible", !aparecer.getAttribute("visible"))
        })
      }
    })

And here are my boxes:

      <a-box caja id="cajaroja" color="#b51628" depth=".1" height="1" width="0.9" position="1 2.6 -2" visible="false"></a-box>
      <a-box caja id="cajaverde" color="#44cf67" depth=".1" height="1" width="0.9" position="-0.5 2.6 -2"></a-box>

When i click the green box nothing happens.

I also have the code here

Answer 1

If your component is called cajaverde then you need to use its full name.

Instead of

<a-box caja ... 

There should be

<a-box cajaverde ...

And only on the one which is supposed to be the button.

---

working glitch here .