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

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

asked Nov 21 '18 at 3:04

John Adegbuji

136

I would recommend you post the code you're having problem with here on stackoverflow in text format rather than a link to a next site. It would then have a better chance of someone answering it

– chinloyal
Nov 21 '18 at 3:20

Try this: document.getElementById('Africa-Tree-Div').style.display = "block"; ID of the element is without #.

– prisoner849
Nov 21 '18 at 6:50

add a comment |

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

asked Nov 21 '18 at 3:04

John Adegbuji

136

I would recommend you post the code you're having problem with here on stackoverflow in text format rather than a link to a next site. It would then have a better chance of someone answering it

– chinloyal
Nov 21 '18 at 3:20

Try this: document.getElementById('Africa-Tree-Div').style.display = "block"; ID of the element is without #.

– prisoner849
Nov 21 '18 at 6:50

add a comment |

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

asked Nov 21 '18 at 3:04

John Adegbuji

136

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

javascript three.js aframe webvr

asked Nov 21 '18 at 3:04

John Adegbuji

136

asked Nov 21 '18 at 3:04

John Adegbuji

136

asked Nov 21 '18 at 3:04

John Adegbuji

136

asked Nov 21 '18 at 3:04

John Adegbuji

136

asked Nov 21 '18 at 3:04

John Adegbuji

136

I would recommend you post the code you're having problem with here on stackoverflow in text format rather than a link to a next site. It would then have a better chance of someone answering it

– chinloyal
Nov 21 '18 at 3:20

Try this: document.getElementById('Africa-Tree-Div').style.display = "block"; ID of the element is without #.

– prisoner849
Nov 21 '18 at 6:50

add a comment |

I would recommend you post the code you're having problem with here on stackoverflow in text format rather than a link to a next site. It would then have a better chance of someone answering it

– chinloyal
Nov 21 '18 at 3:20

Try this: document.getElementById('Africa-Tree-Div').style.display = "block"; ID of the element is without #.

– prisoner849
Nov 21 '18 at 6:50

I would recommend you post the code you're having problem with here on stackoverflow in text format rather than a link to a next site. It would then have a better chance of someone answering it

– chinloyal
Nov 21 '18 at 3:20

Try this: document.getElementById('Africa-Tree-Div').style.display = "block"; ID of the element is without #.

– prisoner849
Nov 21 '18 at 6:50

add a comment |

1 Answer
1

active

oldest

votes

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.

answered Nov 21 '18 at 10:42

Piotr Adam Milewski

5,44521226

Hm doesn’t seem to be working on mobile though, I’m not seeing anything pop up when the tree is clicked

– John Adegbuji
Nov 21 '18 at 15:15

throw cursor="rayOrigin: mouse on the <a-scene> and get rid of the cursor entity - glitch.com/edit/#!/well-lathe?path=index.html:47:57 - works on android 7.1

– Piotr Adam Milewski
Nov 21 '18 at 15:23

@JohnAdegbuji let me know if my glitch is working for you

– Piotr Adam Milewski
Nov 21 '18 at 17:00

Nope. It works on everything but iPhone. I keep tapping the tree but nothing shows up

– John Adegbuji
Nov 26 '18 at 22:01

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404714%2fhow-can-i-make-a-div-show-from-clicking-an-entity-obj-in-aframe-scene%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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.

answered Nov 21 '18 at 10:42

Piotr Adam Milewski

5,44521226

Hm doesn’t seem to be working on mobile though, I’m not seeing anything pop up when the tree is clicked

– John Adegbuji
Nov 21 '18 at 15:15

throw cursor="rayOrigin: mouse on the <a-scene> and get rid of the cursor entity - glitch.com/edit/#!/well-lathe?path=index.html:47:57 - works on android 7.1

– Piotr Adam Milewski
Nov 21 '18 at 15:23

@JohnAdegbuji let me know if my glitch is working for you

– Piotr Adam Milewski
Nov 21 '18 at 17:00

Nope. It works on everything but iPhone. I keep tapping the tree but nothing shows up

– John Adegbuji
Nov 26 '18 at 22:01

add a comment |

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.

answered Nov 21 '18 at 10:42

Piotr Adam Milewski

5,44521226

Hm doesn’t seem to be working on mobile though, I’m not seeing anything pop up when the tree is clicked

– John Adegbuji
Nov 21 '18 at 15:15

throw cursor="rayOrigin: mouse on the <a-scene> and get rid of the cursor entity - glitch.com/edit/#!/well-lathe?path=index.html:47:57 - works on android 7.1

– Piotr Adam Milewski
Nov 21 '18 at 15:23

@JohnAdegbuji let me know if my glitch is working for you

– Piotr Adam Milewski
Nov 21 '18 at 17:00

Nope. It works on everything but iPhone. I keep tapping the tree but nothing shows up

– John Adegbuji
Nov 26 '18 at 22:01

add a comment |

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.

answered Nov 21 '18 at 10:42

Piotr Adam Milewski

5,44521226

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.

answered Nov 21 '18 at 10:42

Piotr Adam Milewski

5,44521226

answered Nov 21 '18 at 10:42

Piotr Adam Milewski

5,44521226

answered Nov 21 '18 at 10:42

Piotr Adam Milewski

5,44521226

answered Nov 21 '18 at 10:42

Piotr Adam Milewski

5,44521226

Hm doesn’t seem to be working on mobile though, I’m not seeing anything pop up when the tree is clicked

– John Adegbuji
Nov 21 '18 at 15:15

throw cursor="rayOrigin: mouse on the <a-scene> and get rid of the cursor entity - glitch.com/edit/#!/well-lathe?path=index.html:47:57 - works on android 7.1

– Piotr Adam Milewski
Nov 21 '18 at 15:23

@JohnAdegbuji let me know if my glitch is working for you

– Piotr Adam Milewski
Nov 21 '18 at 17:00

Nope. It works on everything but iPhone. I keep tapping the tree but nothing shows up

– John Adegbuji
Nov 26 '18 at 22:01

add a comment |

Hm doesn’t seem to be working on mobile though, I’m not seeing anything pop up when the tree is clicked

– John Adegbuji
Nov 21 '18 at 15:15

throw cursor="rayOrigin: mouse on the <a-scene> and get rid of the cursor entity - glitch.com/edit/#!/well-lathe?path=index.html:47:57 - works on android 7.1

– Piotr Adam Milewski
Nov 21 '18 at 15:23

@JohnAdegbuji let me know if my glitch is working for you

– Piotr Adam Milewski
Nov 21 '18 at 17:00

Nope. It works on everything but iPhone. I keep tapping the tree but nothing shows up

– John Adegbuji
Nov 26 '18 at 22:01

Hm doesn’t seem to be working on mobile though, I’m not seeing anything pop up when the tree is clicked

– John Adegbuji
Nov 21 '18 at 15:15

throw cursor="rayOrigin: mouse on the <a-scene> and get rid of the cursor entity - glitch.com/edit/#!/well-lathe?path=index.html:47:57 - works on android 7.1

– Piotr Adam Milewski
Nov 21 '18 at 15:23

@JohnAdegbuji let me know if my glitch is working for you

– Piotr Adam Milewski
Nov 21 '18 at 17:00

Nope. It works on everything but iPhone. I keep tapping the tree but nothing shows up

– John Adegbuji
Nov 26 '18 at 22:01

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu