Change Press Space Bar to Onscreen Button on Mobile

Question

I'm trying out a shooter game using aframe.

I would like the bullet component in the following code to be created with an on screen button, instead of spacebar.

   AFRAME.registerComponent('gun', {
  schema: {
    bulletTemplate: {default: '#bullet-template'},
    triggerKeyCode: {default: 32} // spacebar
  },


  init: function() {
    var that = this;
    document.body.onkeyup = function(e){
      if(e.keyCode == that.data.triggerKeyCode){
        that.shoot();
      }
    }
  },

  shoot: function() {
    this.createBullet();
  },

  createBullet: function() {
    var el = document.createElement('a-entity');
    el.setAttribute('networked', 'template:' + this.data.bulletTemplate);
    el.setAttribute('remove-in-seconds', 3);
    el.setAttribute('forward', 'speed:0.3');

    var tip = document.querySelector('#player');
    el.setAttribute('position', this.getInitialBulletPosition(tip));
    el.setAttribute('rotation', this.getInitialBulletRotation(tip));

    var scene = document.querySelector('a-scene');
    scene.appendChild(el);
  },

Answer 1

Looks like this works:

  init: function() {
    var that = this;
    document.getElementById("shootbutton").onclick = function(e){
        that.shoot();
    }
  },

With HTML:

    <button id="shootbutton" style="float: right;height: 50px;width: 100px;font-size : 19px;color:red;">SHOOT</button>