Pretty much the title. I want to be able to call emit from a Javascript script. Here is my setup (edited for brevety):
<a-video
animation__begin="property: scale; to: 20 20 20; dur: 200; startEvents: startplay"
animation__rewind="property: scale; to: 1 1 1; dur: 200; startEvents: endplay"
src="#myvid" id="avideo"
onclick="this.emit('startplay'); playvideo('myvid');"></a-video> <!-- this.emit works, but calling the defined emit function won't work -->
<a-image src="#pause"
onclick="pausevideo('myvid'); /*works: document.getElementById('v-cadrage').emit('endplay')*/ emit(this, 'avideo', 'endplay')"></a-image> <!-- emit() doesn't work here -->
..
<script>
function emit(from, id, eventname) {
document.getElementById(id).emit.bind(from)(eventname);
}
</script>
The emit function works when invoked from the console. However, I cannot get it to work when called from inline javascript. If I rewrite the whole document.getElement... code inline, it works too. I observe the same result without the .bind() "hack".
Did I miss something? How can I make it work? Can you reproduce this situation?
Thank you
When you click an element like this:
<a-box onclick="emit('something');"></a-box>
emit is being called within the current scope - which is the box. So it's kind of the same as document.querySelector("a-box").emit('something').
To use your function simply change its name.
Btw I'd really recommend moving all logic to a custom component. It should simplify managing events (like here) - to just node.emit(event-name).