Click and call javaScript function using A-Frame

Question

I want to call two function in javaScript using aframe. Here is my code

AFRAME.registerComponent('house-hold', {
schema: {
    type: 'selectorAll',
    default: null
  },
init: function () {
    this.entities = [];

    if ( this.data === null ) {
      this.entities.push(this.el);
    } else {
      this.entities = this.data;
    }
   this.toggleHandler = this.toggleVisibility.bind(this);
},

play: function() {
  this.el.addEventListener('click', this.toggleHandler);
},

pause: function() {
    this.el.removeEventListener('click', this.toggleHandler);
},
hide: function(entities){
var entities = this.entities;
var cursor = this.el.sceneEl.querySelector('[cursor]');
for (var i = 0; i < entities.length; i++) {

        entities[i].object3D.visible = false;

        entities[i].pause();

        entities[i].classList.remove('clickable');
        entities[i].classList.add('clickable-disabled');
        cursor.components.raycaster.refreshObjects();

      } 
 },
 show: function(entities){
var entities = this.entities;
var cursor = this.el.sceneEl.querySelector('[cursor]');
for (var i = 0; i < entities.length; i++) {

        entities[i].object3D.visible = true;

        entities[i].play();

        entities[i].classList.remove('clickable-disabled');
        entities[i].classList.add('clickable');
        cursor.components.raycaster.refreshObjects();

      }
 },
toggleVisibility: function(e) {   
  var categoryScene = document.querySelectorAll('#category-scene');
  var houseHoldCareScene = document.querySelectorAll('#house-hold-scene');
  var personalCareScene = document.querySelectorAll('#personal-care-scene');
  var toasterScene = document.querySelectorAll('#toaster-scene');
  var cursor = this.el.sceneEl.querySelector('[cursor]');
  show(houseHoldCareScene);
  hide(categoryScene);
  hide(personalCareScene);
  hide(toasterScene);
   }
  });

This is my code. I called hide and show function. But it did not work. Clicking also did not work.I think my calling method is not correct. When I click it should work but it did not. How can I call that two function properly? How to solve this problem?

Cursor I made like this

<a-camera position="2 -2.5 12">

  <!-- Only make entities with class="clickable" clickable. -->
  <a-cursor raycaster="objects: .clickable" 
            fuse-timeout="2000"
            material="color: #F4D03F; shader: flat" 
            opacity="0.9">

    <!-- CLICK & FUSE ANIMATIONS -->
    <a-animation begin="click" easing="ease-in" attribute="scale" dur="150" fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
    <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500" fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>

  </a-cursor>

</a-camera>

Answer 1

You have to call your functions using the this pointer since they are methods of the component, not global function declarations:

this.show(houseHoldCareScene);
this.hide(categoryScene);
this.hide(personalCareScene);

Answer 2

First of all, calling functions defined in the component, need to have the this keyword, because they are encapsulated in the component, and not global (like D.Marcos said in his anwser).

Second of all, You need to have your event listener made on init , if You want it to work right away:

init: function() {
   // your current code (...)
   this.toggleHandler = this.toggleVisibility.bind(this);
   this.el.addEventListener('click', this.toggleHandler);
}

The play, and pause functions are called when entering / exiting the inspector as far as i know.