如何使用 javascript（文件是本地文件）从一个 HTML 文件重定向到另一个文件？

Question

index.html file path: /Users/nixon/Documents/Website Development/Pers Website/index.html

loginpage.html path: /Users/nixon/Documents/Website Development/Pers Website/loginpage.html

let loginButton = document.querySelector("#login")

loginButton.addEventListener('click', reDirectingLoginPage);

function reDirectingLoginPage() {
  window.replace("/Users/nixon/Documents/Website Development/Pers Website/index.html")
}

---UPDATE AS OF 08/08/2020---

Tried updating the code to this and it still didn't work. HTML:

button onclick="goToURL" id="login" type="button" class="btn btn-lg btn-dark">Login</button">

JS:

function goToURL() {
  window.open("Users/nixon/Documents/Website Development/Pers Website/loginpage.html")
}

No errors in console: https://gyazo.com/29a2084c082f66f943795ecfef3b3909

Answer 1

[1.0] Your onclick needs parenthesis.

[1.1] You could do an event listener instead. Doing it this way, you'll omit the parenthesis

[1.2] If you aren't doing anything else other than loading a new page with the javascript, you don't need javascript for that. anchor elements are meant for navigating to webpages.

[1.3] replace() is a part of the location object. Not the window. Instead of window.replace() it should be window.location.replace()

[1.4] I had previously mentioned replace , but noticed that this keeps you from being able to use the back button. If you use assign instead, the back button will work normally.

 let loginButton1 = document.querySelector("#login1"); let loginButton2 = document.querySelector("#login2"); loginButton2.addEventListener('click', reDirectingLoginPage); function reDirectingLoginPage() { // [1.3] and [1.4] // window.location.replace("http://example.com"); window.location.assign("http://example.com"); alert("these url assignments aren't working stackoverflow code snippets. This alert proves it's running. Take these to your project and they should work."); }

 <.-- [1.0] --> <button id="login1" onclick="reDirectingLoginPage()">Login1</button> <.-- [1:1] --> <button id="login2">Login2</button> <.-- [1.2] --> <a href="http://example.com">Login3</a>