Question 365509 in Html Question posted in
Some basic documentation can be found here.

Html – Why won't my page go to another page even though I'm using the same method as before?

So in an attempt to learn some web design and a little bit of game/puzzle design, I decided to dip my toes into making an ARG (Alternate Reality Game if you didn’t know) and all of the normal pages work fine. However, when I started making a login page where some of the secrets are going to be hidden, it won’t move to the next page.

The method I’ve been using to move around pages is the standard window.location.href = '/pages/*INSERT FILENAME*.html', and for the entire rest of the site it works as expected. But for the login page, I’ve been trying to implement a very basic conditional that checks for a matching username and password, of which I had set up a test user that would move the page to a over-glorified ‘Hello World’ page. But for whatever reason, it won’t move. I had even set it up to where just pressing the button, regardless of input, would send you to the hello world page and it still didn’t work. The page in question is the /pages/login.html, and it’s trying to go to /pages/helloTest.html, login.html is as follows;

<!-- src = /pages/login.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Authentication</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body class="login">
    <center>
      <form action="">
        <label for="user">Username:</label>
        <input type="text" id="user" name="user"> <br>
        <label for="passwrd">Password: </label>
        <input type="password" id="passwrd" name="passwrd" /> <br /><br />
        <button id="login">Submit</button>
      </form>
    </center>
    <script>
      var user = document.getElementById("user").value;
      var passwrd = document.getElementById("passwrd").value;
      /* This was supposed to be a function to check the credentials and send the player to the respective page.
       function checkCredential() {
        if ((user == "TWPD-TEST") & (passwrd == "TEST")) {
          window.location.href = "/pages/helloTest.html";
        }
      }*/
      button.addEventListener("click", function () {
        if ((user == "TWPD-TEST") & (passwrd == "TEST")) {
          window.location.href = "/pages/helloTest.html";
        }
      });
      passwrd.addEventListener("keyup", function (event) {
        if (event.keyCode == 13) {
          button.click;
        }
      });
    </script>
  </body>
</html>

Now, I have tried making to where the conditional was just inside of an onclick event in the button and scrap the entire script, but still nothing. The page will just reload and move nowhere. Is there something I’m doing wrong?

For additional context, I’m deploying the site locally using the Live Server extension for VSCode on a Windows 10 machine (since my machine apparently doesn’t meet the spec requirements for Win11).

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out, and learned to never use <form> again.

    The issue completely went away when I removed the <form> tags, so I'm thinking that maybe the form was trying to do something that contradicted other actions in the script. I'm pretty sure the site was still getting input, but it wouldn't redirect for some reason. So, what all happened was;

    1. I removed the <form> tags
    2. gave the button an onclick event that calls a function to collect and check the information from the textboxes

    The only issue I'm having now is that it's not responding to the listeners and I have to have it basically call a function to work, so I'll have to keep investigating that, but other than that it works!

    In the end, this is what the page code looks like:

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Authentication</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all" />
  </head>
  <body class="login">
    <center>
      <label for="user">Username:</label>
      <input type="text" id="user" name="user" /> <br />
      <label for="passwrd">Password: </label>
      <input type="password" id="passwrd" name="passwrd" /> <br /><br />
      <button id="login" onclick="checkCredential()">Submit</button>
    </center>
    <script>
      var user = document.getElementById("user").value;
      var passwrd = document.getElementById("passwrd").value;
      var loginButton = document.getElementById("login");
      loginButton.addEventListener("click", function () {
        if ((user == "TWPD-TEST") & (passwrd == "TEST")) {
          window.location.href = "/pages/helloTest.html";
        }
      });
      function checkCredential() {
        user = document.getElementById("user").value;
        passwrd = document.getElementById("passwrd").value;
        checkAccess();
      }
    </script>
  </body>
</html>


  2. 0

    You cannot add an event listener to button because that isn’t the ID of any element. Button is the type, not the ID.

    You need to get a reference to the specific button and then add the listener to that. Example:

    var loginButton = document.getElementById("login");
loginButton.addEventListener("click", function () {
    if ((user == "TWPD-TEST") & (passwrd == "TEST")) {
      window.location.href = "/pages/helloTest.html";
    }
});
    Login or Signup to reply.
  3. 0

    Try this:

    var button = document.getElementById("login");

button.addEventListener("click", function(event) {
  event.preventDefault(); // Prevent form submission
  var user = document.getElementById("user").value;
  var passwrd = document.getElementById("passwrd").value;
  if (user === "TWPD-TEST" && passwrd === "TEST") {
    window.location.href = "/pages/home.html";
  }
});

var passwrdInput = document.getElementById("passwrd");
passwrdInput.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
    event.preventDefault(); // Prevent form submission
    button.click();
  }
});
    <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Authentication</title>
  <link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>

<body class="login">
  <center>
    <form id="loginForm">
      <label for="user">Username:</label>
      <input type="text" id="user" name="user"> <br>
      <label for="passwrd">Password: </label>
      <input type="password" id="passwrd" name="passwrd" /> <br /><br />
      <button id="login">Submit</button>
    </form>
  </center>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search