Count the number of clicks

Question

I am still very new to A-frame and this question might sound a bit lame. I've tried to look it up but I don't fully understand the documentation about the components. I just want to count the number of clicks, it's just a test to use this for important operations. This is what my component looks like now :

        AFRAME.registerComponent('event-test', {
        init: function() {
            var el1=document.querySelector('a-scene');
            var x = 0;
            el1.addEventListener('click', function () {
                this.x = this.x + 1;
                console.log("number of clicks :" + this.x);
            })
        }
    })

Answer 1

You're code is pretty close to the desired results. There are a few things to consider with A-Frame that are a bit different from the regular HTML elements.

First is that click events (in particular the mouse events) require the cursor component along with the rayOrigin attribute set: rayOrigin: mouse

You can take a look at this gltich for more details: https://glitch.com/edit/#!/a-frame-mouse-click-example

Another thing to note is that you can't 'click' on the scene. You could do two things:

One is a normal click event on the document, or if you want to click on a particular object in the scene, add the event listener to that object:

https://glitch.com/edit/#!/a-frame-basic-click

AFRAME.registerComponent('click-test', {
  init: function () {
    const sphere = document.querySelector('#sphere')
    this.x = 0;
    document.addEventListener('click', () => {
        // console.log('document click');
        // console.log(this.x++)
    })
    sphere.addEventListener('click', () => {
        console.log('sphere click');
        console.log(this.x++)
    })
  }
});