I have been calling javascript functions on mouseenter, like this:
document.querySelector('a-cylinder').addEventListener('mouseenter', function(evt) {
alert("This is a cylinder.");
})
document.querySelector('a-box').addEventListener('mouseenter', function(evt) {
alert("This is a box.");
})
document.querySelector('testBox').addEventListener('mouseenter', function(evt) {
alert("This is a box, targeted with an ID");
})<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
<a-scene>
<a-camera camera look-controls="reverseMouseDrag: true" cursor="rayOrigin: mouse" raycaster="objects: .hoverable"></a-camera>
<a-box class="hoverable" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-box id="testBox" class="hoverable" position="0 0.8 -4" rotation="0 45 0" radius="1.25" color="#EF2D5E"></a-box>
<a-cylinder class="hoverable" position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>It works for the cylinder, and for the first box (the one that comes first in the HTML). However, I cannot specify which box I want to hover on to call the function if, instead of using querySelector('a-box') I use querySelector('elementID').
First of all, keep in mind, querySelector will always return the first matched element, so in order to get all the boxes, you should use querySelectorAll instead. Also, for selecting id you should refer it by # keyword.
There are multiple ways to overcome this situation, for selecting each specific element in your DOM you can simply assign a unique id to each of them and then refer to them by document.getElementById. So let's find out how it works exactly, for instance, let's say you assign a unique id to your second box like this:
<a-box id="testBox" class="hoverable" position="0 0.8 -4" rotation="0 45 0" radius="1.25" color="#EF2D5E"></a-box>
For referring to such an element you can either do it with getElementById or querySelector just like this:
document.getElementById('#testBox').addEventListener('mouseenter', function(evt) {
alert("This is a box, targeted with an ID");
})
// or
document.querySelector('#testBox').addEventListener('mouseenter', function(evt) {
alert("This is a box, targeted with an ID");
})
NOTE: You should always consider using # for selecting items by id and . for selecting items by class.
But if you got a situation when the elements are too much and you want to avoid using the unique id for each of them you can do this by querySelectorAll and then iterate through them and add an event to each element. For more info, you can read this.
I will just fix your current code, so your code should be something like this:
document.querySelector('a-cylinder').addEventListener('mouseenter', function(evt) {
alert("This is a cylinder.");
})
document.querySelector('a-box').addEventListener('mouseenter', function(evt) {
alert("This is a box.");
})
document.querySelector('#testBox').addEventListener('mouseenter', function(evt) {
alert("This is a box, targeted with an ID");
})<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
<a-scene>
<a-camera camera look-controls="reverseMouseDrag: true" cursor="rayOrigin: mouse" raycaster="objects: .hoverable"></a-camera>
<a-box class="hoverable" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-box id="testBox" class="hoverable" position="0 0.8 -4" rotation="0 45 0" radius="1.25" color="#EF2D5E"></a-box>
<a-cylinder class="hoverable" position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>