Probé diferentes métodos para validar el nombre de usuario y la contraseña, y enviar a la nueva página, pero la página simplemente se vuelve a cargar después de hacer clic en el botón. Había pensado que preventDefault() detendría esto. Si alguien nota el problema, por favor hágamelo saber, gracias.
const loginForm = document.querySelector('login-form') const loginButton = document.querySelector('login-form-submit') loginButton.addEventListener("click", (e) => { e.preventDefault(); const username = loginForm.username.value; const password = loginForm.password.value; if (username === 'admin' && password === 'admin1') { alert("You have logged in!"); window.open('Data.html'); } else { alert("Incorrect Password"); } }) <div class="signin"> <form id="login-form"> Sign in to access your account <br> <br> <label for="name">Account Name:</label> <input type="text" id="username-field" name="username" class="login-form-field" placeholder="Username"><br><br> <label for="password">Account Password:</label> <input type="password" id="password-field" name="password" class="login-form-field" placeholder="Password"><br><br> <input type="submit" value="Log In" id="login-form-submit"> </form> </div>La forma más fácil de hacerlo es usar input type="button" , simplemente cambie de submit a button
<input type="button" value="Log In" id="login-form-submit" /> Además, tiene un error en su d ocument.querySelector . Para obtener el elemento por id, debe usar # like
document.querySelector('#login-form-submit')loginForm.addEventListener('submit', function(e){ e.preventDefault(); const username = e.currentTarget.querySelector('[name="username"]').value; const password = e.currentTarget.querySelector('[name="password"]').value; })