Change Views with Pointer Events in SDK 5.0

[harpo666]

Hi guys,

I am trying to change views in the new SDK 5.0 using pointer-events when I tap the screen.

I have 2 views:

1. index.view

2. custom1.view

I get the error 'Cannot set property 'onclick' of null'.

My code is as follows:

My index.view is:

<!-- index.view -->

<svg>
  <rect id="background0" height="100%" width="100%"  pointer-events="visible" class="background" />
  <text id="screen1Text" x="50%" y="80%" pointer-events="visible">This is screen1</text>

</svg>

The custom view is:

<!-- custom1.view -->
<svg>
  <animate attributeName="x" from="100%" to="0" begin="load" dur="0.5" easing="ease-in-out" />

  <svg>
    <rect id="background1" height = "100%" width="100%"  pointer-events="visible" />
    <!-- your content goes here -->
      <text id="screen2Text" x="50%" y="80%" pointer-events="visible">This is screen2</text>
  </svg>

</svg>

And the index.js is:

var flag = 1;
const background0 = document.getElementById("background0");
const background1 = document.getElementById("background1");

/* Update - screen*/
function updateScreen(){
  
  console.log(`The flag is ${flag}` )
  
  if(flag == 1){    
    console.log("I am in index.view, moving to custom.view")  
    flag = 2;
    console.log(`The flag is ${flag}` );
    
    document.location.assign('custom1.view');    
  }
  else{    
    console.log("I am in custom.view, moving to index.view")
    flag = 1;
    console.log(`The flag is ${flag}` )
    
    document.location.assign('index.view');
  }
  
}

background0.onclick = function() {
  updateScreen();
}

background1.onclick = function() {
  updateScreen();
}

[JonFitbit]

You didn't mention which click is failing, so I assume it's background1.

Try adding the `click` event after the view is loaded.

document.location.assign('custom1.view').then(() => {
  background1.addEventListener("click", () => {
    console.log("background1 click");
  });
});

[harpo666]

Hi Jon,

Yes it is background1 (from custom1.view) that does not click. That is helpful!

I modified what you suggested and called the getElementByID and then the onclick function, and it seems to be working as per the below. It looks like I also have to do the same thing to return to the initial screen 'index.view.'

Thanks.

Assign custom1.view

document.location.assign('custom1.view').then(() => {
const background1 = document.getElementById("background1");                                                         background1.onclick = function() {  updateScreen();  }
                                                        });

Assign index.view

document.location.assign('index.view').then(() => {
const background0 = document.getElementById("background0");                                                         background0.onclick = function() {  updateScreen();  }
                                                        });