How Can I Make A Div Show From Clicking An Entity/OBJ in Aframe Scene

Question

Im having an issue with my code here. Im still pretty new to Javascript so I may be making a noobie mistake. What Im trying to accomplish is to be able to click the red tree on the globe in my example and a red div box should pop up. I feel like I've done everything right but I keep receiving an error message in my console of "Uncaught TypeError: Cannot read property 'style' of null" I setup a Glitch with my example code. Any help would be GREATLY appreciated. Big thanks in advance!

https://glitch.com/edit/#!/join/57349026-d43e-4466-87f0-b793c7a89c5f

Answer 1

For making overlay items, try positioning them by using the position: fixed attribute. Since the a-frame canvas is taking up the whole screen, you should "fix" them over the canvas.

---

When using getElementById you don't have to use the # character.

When using document.querySelector you should use

• . for classes
• # for id's

---

Furthermore, your CSS selector is #Africa-Tree while the div is #Africa-Tree-Div .