Delphi-PRAXiS - Javascript funktioniert nicht nach Einbindung von PHP

Hallo zusammen,

ich lerne gerade den Umgang mit PHP und co. und habe dafür eine kleine Login-Seite gebastelt, bzw. versuche noch das zu tun.

Ich benutze Laravel/Valet um PHP zu benutzen und habe es heute endlich geschafft die gewünschte Funktion einzubauen. Seitdem funktioniert allerdings mein Javascript nicht mehr, mit welchem es bis dahin keine Probleme gab...

Der Plan war, dass ich mit PHP prüfe ob die Felder leer sind und dann dementsprechend anzeigen lasse dass es notwendig ist diese auszufüllen.
Mit Javascript prüfe ich dann, ob die eingegebenen Daten korrekt sind. Wenn ja gibt es einen Alert dass das Login erfolgreich war, wenn nicht eine Fehlermeldung dass mindestens eine Eingabe nicht richtig ist.
Als Daten habe ich ganz einfach den Usernamen auf user und das Passwort auf password gesetzt. Eine Datenbank muss da nicht eingebaut werden, das Ganze Projekt dient nur der Übung um erstmal reinzukommen.

Hier die HTML-Datei:

Code:

			<!DOCTYPE html>

<head>

  <meta charset="UTF-8">

  <title>Login</title>

  <link rel="stylesheet" href="login.css">

  <script defer src="login.js"></script>

</head>

<body>

  <?php

  $usernameErr = $passwordErr = "";

  $username = $password = "";

  if ($_SERVER["REQUEST_METHOD"] == "POST") {

    if (empty($_POST["username"])) {

      $usernameErr = "Username is required";

    } else {

      $username = test_input($_POST["username"]);

    }

    if (empty($_POST["password"])) {

      $passwordErr = "Password is required";

    } else {

      $password = test_input($_POST["password"]);

    }

  }

  function test_input($data) {

    $data = trim($data);

    $data = stripslashes($data);

    $data = htmlspecialchars($data);

    return $data;

  }

  ?>

  <main id="main-holder">

    <h1 id="login-header">Login</h1>

   <form id="login-form" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

      <input type="text" name="username" id="username-field" class="login-form-field" placeholder="Username">

       <span class="error">* <?php echo $usernameErr;?></span>

        <br><br>

      <input type="password" name="password" id="password-field" class="login-form-field" placeholder="Password">

       <span class="error">* <?php echo $passwordErr;?></span>

        <br><br>

      <input type="submit" name="submit" value="Submit">

    </form>

    <div id="login-error-msg-holder">

      <p id="login-error-msg">Invalid username <span id="error-msg-second-line">and/or password</span></p>

    </div>

  </main>

</body>

</html>

Und hier die Javascript-Datei:

Code:

			const loginForm = document.getElementById("login-form");

const loginButton = document.getElementById("login-form-submit");

const loginErrorMsg = document.getElementById("login-error-msg");

loginButton.addEventListener("click", (e) => {

    e.preventDefault();

    const username = loginForm.username.value;

    const password = loginForm.password.value;

    if (username === "user" && password === "password"){

        alert("You have successfully logged in.");

    } else {

        loginErrorMsg.style.opacity = 1;

    }

})