How to properly structure views?

[M.H]

What is the best way to structure views so that you can access elements from a few before you see it on the screen? I have views structure hierarchically, where an onclick event for a button assigns the next view. Example:

let button1 = document.getElementById("button1");
button1.onclick = function() {
  document.location.assign('./resources/view1.view').then(() => {
    let button2 = document.getElementById("button2");
    let button3 = document.getElementById("button3");
    button2.onclick = function() {
      document.location.assign('./resources/view2.view').then(() => {
        let text2 = document.getElementById("text2");
        text2.text = "Hello world";
      });
    }
    button3.onclick = function() {
      document.location.assign('./resources/view3.view').then(() => {
        // other stuff
      });
    }

This format means I can't assign an element to a variable outside of the hierarchy or update things we haven't seen yet. I'd like to structure it more like this:

let button1 = document.getElementById("button1");
let button2 = document.getElementById("button2");
let button3 = document.getElementById("button3");
let text2 = document.getElementById("text2");
text2.text = "Hello world";
button1.onclick = function() {
  document.location.assign('./resources/view1.view');
}
button2.onclick = function() {
  document.location.assign('./resources/view2.view');
}
button3.onclick = function() {
  document.location.assign('./resources/view3.view');
}

What would you suggest?

[Guy_]

Hi @M.H - some alternatives are using

display="none" or inline

opacity=0 or 1

[M.H]

@Guy_ If use display="none" or "inline" then how do I capture the swipe back events? The benefit of document.location.assign() is that I can use the swipe back to go back to the previous screen. This is for SDK 5/6 so I don't have a back button anymore.

[Guy_]

@M.H  - the onclick action is only available to the svg views it's in, that are inline.

Eg. When you click view1 button to switch to view 2, disable svg view 1 and enable svg view 2.

Alternatively you can have just one button permanently inline and do whatever action is required for the current svg view to switch to the next svg view.

Are you looking for a way to override the left / right scroll in an app or clock face?

[Gondwana]

Have you seen this?

Since handlers need to be re-established whenever a new document is loaded, the structure probably has to be functionally similar to your original.