function setFormMessage(formElement, type, message) {
    const messageElement = formElement.querySelector(".form__message");

    messageElement.textContent = message;
    messageElement.classList.remove("form__message--success", "form__message--error");
    messageElement.classList.add(`form__message--${type}`);
}

function setInputError(inputElement, message) {
    inputElement.classList.add("form__input--error");
    inputElement.parentElement.querySelector(".form__input--error-message").textContent = message;
}

function clearInputError(inputElement) {
    inputElement.classList.remove("form__input--error")
    inputElement.parentElement.querySelector(".form__input--error-message").textContent = "";
}

/* Weg?*/
setFormMessage(loginForm, "success", "You're logged in!");

document.addEventListener("DOMContentLoaded", () => {
    const loginForm = document.querySelector("#login");
    const createAccount = document.querySelector("#createAccount");

    document.querySelector("#linkCreateAccount").addEventListener("click", e => {
        e.preventDefault();
        loginForm.classList.add("form-hidden");
        createAccountForm.classList.remove("form-hidden");
    });

    document.querySelector("#linkLogin").addEventListener("click", e => {
        e.preventDefault();
        loginForm.classList.remove("form-hidden");
        createAccountForm.classList.add("form-hidden");
    });

    loginForm.addEventListener("submit", e => {
        e.preventDefault();

        //Perform your AJAX/Fetch login

        setFormMessage(loginForm, "error", "Username/password is invalid")
    });

    document.querySelectorAll(".form__input").forEach(inputElement => {
        inputElement.addEventListener("blur", e => {
            if (e.target.id == "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
                setInputError(inputElement, "Username must be at least 10 characters in length");
            }
        });

        inputElement.addEventListener("input", e => {
            clearInputError(inputElement);
        });
    });
});
/*Hier begint de css van de hele signup pagina*/

body {
    background-color: #212329;

    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }
  h1 {
    color: white;
    text-align: center;
  }
  p {
    color: white;
  }
  a {
    color: white;
    text-decoration: none;
  }
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
  }
 
  input {
    color: #FFFFFF;
  }
  
  input::placeholder {
    color: #FFFFFF;
  }
  
/*Hier begint de css van de signup en login*/

  .container {
      width: 400px;
      max-width: 400px;
      margin: 1rem;
      padding: 2rem;
      box-shadow: rgb(28, 30, 31) 0px 0px 40px;
      border-radius: 4px;
      background: rgb(24, 26, 27);
  }

  .container,
  .form__input,
  .form__button {
      font: 500 1rem 'Arial', sans-serif;
  }

  .form--hidden {
    display: none;
  }

  .form > *:first-child {
      margin-top: 0;
  }

  
  .form > *:last-child {
    margin-bottom: 0;
}

.form__title {
  margin-bottom: 2rem;
  text-align: center;
}

.form__message {
    text-align: center;
    margin-bottom: 1rem;
}

.form__message--success {
    color: #04AA6D;
}

.form__message--error {
    color: #F9423D;
}

.form__input-group {
  margin-bottom: 1rem;
}

.form__input {
  display: block;
  width: 100%;
  padding: 0.75rem;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #04AA6D;
  outline: none;
  background: #222426;
  transition: background 0.2s, bordercolor 0.2s;
}

.form__input:focus {
  border-color: #337AF1;
  background: #222426;
}

.form__input-error {
  color: #F9423D;
  border-color: #F9423D;
}

.form__input-error-message {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #F9423D;
}

.form__button {
  width: 100%;
  padding: 1rem 2rem;
  font-weight: bold;
  font-size: 1.1rem;
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  background: #04AA6D;
}

.form__button:hover {
  background-color: #337AF1;
  transition: all 0.4s ease-out;
}

.form__button:active {
  transform: scale (0.98);
}

.form__text {
  text-align: center;
  margin: 10px;
}

.form__link {
  text-decoration: none;
  cursor: pointer;
}

.form__link:hover {
  text-decoration: underline;
  color: #337AF1;
  transition: all 0.2s ease-out;
}
<!DOCTYPE html>
<html>
<head>
<link>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackoverflow.com/questions/68913112/cssreset.css">
<link rel="stylesheet" href="cssindex.css">
<link rel="stylesheet" href="csssignup.css">
<script src="./js/main.js"></script>
<link rel="icon" type="image/png" href="imgicon.png">
</head>
<body>
<div class="container">
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or E-mail">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input form__input--error" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Login</button>
<p class="form__text">
    <a href="#" class="form__link">Forgot your password?</a>
</p>
<p class="form__text">
    <a class="form__link" href="#" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>

<form class="form form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" id="signupUsername" class="form__input" autofocus placeholder="Username">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="E-mail">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input form__input--error" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input form__input--error" autofocus placeholder="Confirm password">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Sign up</button>
<p class="form__text">
    <a class="form__link" href="#" id="linkLogin">Already have an account? Sign in</a>
</p>




</form>
</div>
</body>




</html>

My JavaScript doesn’t work. It looks like it’s not even in my PHP file. Does anyone know how to fix it? If I click Create Account it should give me another form but it doesn’t. Please someone help me solve this problem. I need to work to keep my project going.

Thanks in advance!

5.