How to navigate to another html page in javascript

Question

I have a main html file called default.html with two javascript files default.js and backend.js.

The two javascript files are added as follow in the main html

<script src="assets/js/backend.js"></script>
<script src="assets/js/default.js"></script>

the default.js contains this setup

startUp()
  
eel.expose(startUp);
function startUp(){
 showNextPage()  
}

function showNextPage(){
 console.log("show next page")
 window.location = 'next.html'
 console.log("i guess the page did not change")
}

in backend.js if i call showNextPage() to execute on page load, the page change works

showNextPage()

class auth {
}

class storageManager {
}

but if I call showNextPage() to execute within a class like this

class auth {
     //...
 showNextPage()
}
   

only the console.log messages in showNextPage() are performed and not the page change.

I don't know what is going on, for some reason it appears the window.location change only works early on page load.

what could be causing this and how can i fix it?

I tried

window.location.href
window.location.replace

and other similar methods. The main thing is that the function is proven to work but not within a class which has confused me for days now. I have triple checked my code multiple times but no result

Answer 1

Try making your default.js file into this

 startUp()
  
eel.expose(startUp);
function startUp(){
    
 showNextPage()  
    
}

function showNextPage(){

 console.log("show next page")
  window.pathname = '/next.html' //IMPORTANT PART.. origin is the page, like https://stackoverflow.com.. pathname is everything past that

 console.log("i guess the page did not change")
}

I hope it worked