joystick cant be reloaded when change the view about joystick

[hawkpurpletree]

first, there is a bug, when i change the view, the old stuff remains, this is because the line
var all_views = document.querySelectorAll('view');
must be
var all_views = document.querySelectorAll('div.view');

and second, i found two solutions for this problem

with two separated joysticks for every mode

in the html

var joy;
var joy1;
var joy2;

in the main app in the html

                joy1 = new JoyStick('joyDiv');
		joy = joy1;

		this.airconsole.onMessage = function(from, data) {
		    if (data.view) {
		        showView(data.view);
		        if (joy2 == null)
		            joy2 = new JoyStick('joyDiv2');
		        if (joy == joy1)
		            joy = joy2;
		        else
                            joy = joy1;
		    }
		}

in body

    <div id="ingame_attack" class="view">
        <div id="pass-button" ontouchstart="window.app.sendMessageToScreen('pass')"></div>
        <div id="shoot-button" ontouchstart="window.app.sendMessageToScreen('shoot')"></div>
        <div id="joyDiv"></div>
    </div>
    <div id="ingame_defense" class="view">
        <div id="change-button" ontouchstart="window.app.sendMessageToScreen('pass')"></div>
        <div id="tackle-button" ontouchstart="window.app.sendMessageToScreen('shoot')"></div>
        <div id="joyDiv2"></div>
    </div>

with a separated div for joystick

in body

    <div id="ingame_attack" class="view">
        <div id="pass-button" ontouchstart="window.app.sendMessageToScreen('pass')"></div>
        <div id="shoot-button" ontouchstart="window.app.sendMessageToScreen('shoot')"></div>
    </div>
    <div id="ingame_defense" class="view">
        <div id="change-button" ontouchstart="window.app.sendMessageToScreen('pass')"></div>
        <div id="tackle-button" ontouchstart="window.app.sendMessageToScreen('shoot')"></div>
    </div>
    <div id="ingame_joystick" class="view">
        <div id="joyDiv"></div>
    </div>

in html, in the funcion show view

var showView = function (id) {
    var view = document.getElementById(id);
      var all_views = document.querySelectorAll('div.view');
      // Hide all containers
      for (var i = 0; i < all_views.length; i++) {
          all_views[i].style.display = 'none';
      }

      // Show container
      view.style.display = 'block';

      document.getElementById('ingame_joystick').style.display = 'block';

  };

[bobboteck]

Sorry @hawkpurpletree, but I don't understand the problem.
What I can tell you is that if you have to use multiple JoySticks on the page, you must assign each DIV that will contain the JoyStick, a different ID, as you can also see on the example page [https://github.com/bobboteck/JoyStick/blob /master/joy.html].
You could call them Joy1 and Joy2, or to be clearer in your scope code, JoyAttack and JoyDefense.

However if you want to ask a few more questions, you can also use the GitHub Discussions that I have activated and found here [https://github.com/bobboteck/JoyStick/discussions], instead of using the Issues.

If you are interested, I recently published the project as an NPM package.

To close, I would be very curious to see your finished project, to see how you used the JoyStick, then if you want there is a Wiki page where I have published some projects that use it, and if it is possible for you I would like to add yours too.