JavaScript - how to cycle three items in Spark AR studio

Question

Edit for clarity:

The context of this question is not in the context of javascript / html. It is in the context of javascript Spark AR studio. Typical html / css / javascript methods don't work. I only have experience with javascript through this app and it is the first time I learned any at all. I included what worked for me below.

---

I have three assets in a mobile ar app that need to swap on tap so that each tap toggles off the visibility of the current item and toggles on the visibility of the next. I can monitor taps and subscribe to that event. I can make the assets *.hidden = true or false but I'm unsure of the logic needed to swap through them.

Would I create a counting function for taps (limited to three?) And then use if/then depending on the number generated to hide / unhide?

I've really only scripted before in Python and some js but am 'code curious' What conventions would I use in JavaScript for such a puzzle? What might success look like?

Answer 1

Here is an example of how to use Javascript to click through a set of assets (in this case, input elements), showing just one asset at a time:

 var ix = 0; var assets = ["x1","x2","x3"].map( function(x) {return document.getElementById(x);} ); function showNextAsset() { assets[ix++].style.display = "none"; assets[ix = (ix < assets.length) ? ix : 0].style.display = "block"; } 

 <form onclick="showNextAsset(); return false;"> <input id="x1" value="foo"> <input id="x2" value="bar" style="display:none"> <input id="x3" value="toto" style="display:none"> </form> 

Answer 2

Just a heads up that I finally figured out how to do what I needed to do and it looks like this:

const TouchGestures = require('TouchGestures');
const Scene = require('Scene');
const D = require('Diagnostics');

//scene assets:
const asset1 = Scene.root.find('plane0');
const asset2 = Scene.root.find('plane1');
const asset3 = Scene.root.find('plane2');
//assets put into array:
const myArray = [asset1,asset2,asset3];
//initial visibility state for assets:
var hideStates = [0,1,1];
//set initial visibility:
hide(myArray,hideStates);



//MAIN EVENT___________________________________________________________________________________
TouchGestures.onTap().subscribe(function (gesture) { // cycle visibility for assets on event

    var hideStates = [1,1,1];
    hide(myArray,hideStates);
    unHide(myArray);

});

//_____________________________________________________________________________________________

//this will move through an array one step at a time, returning the index...
var cycler = {
    current: -1,
    cycle: function(arr) {
        if (this.current == arr.length -1) {
            this.current = 0;
        } else {
            this.current++;
        }
        return this.current;
    }
};


function hide(assets,states) {
    for (var i = 0; i <assets.length; i++) {
        assets[i].hidden = states[i];
    }
};

function unHide(assets) {
    var unhide = cycler.cycle(myArray);
    myArray[unhide].hidden = 0;
};

Not sure if this is the best way to do things but it works!