Obtuve un formulario de inicio de sesión de forma asincrónica y lo configuré dentro de document.body . Declaré que está en el formulario de envío antes de eso, y ahora recibo un Reference error . ¿Hay alguna forma de configurar onsubmit usando html, sin tener que llamar a loginForm.onsubmit = login . En las fuentes del inspector de Chrome, incluso después de configurar /session en el cuerpo, todavía muestra el código index.html original.
A continuación encontrará public/js/app.js
const result = await fetch('/session'); if (result) { const login = await result.text(); document.body.innerHTML = login; } function login(e) { e.preventDefault(); const loginForm = document.getElementById('loginForm'); console.log(loginForm); const options = { method: loginForm.method, body: new FormData(loginForm) }; const loginButton = document.getElementById('loginButton'); const loginButtonHTML = loginButton.innerHTML; loginButton.innerHTML = 'Loading...'; disableElements(loginForm); // const result = await fetch(loginForm.action, options); } El html devuelto de /session es
<form id="loginForm" action="/user/login" method="post" onsubmit="login(event)"> <input type="text" name="username" autocomplete="username" placeholder="Username"> <input type="password" name="password" autocomplete="current-password" placeholder="Password"> <button id="loginButton" type="submit">Login</button> </form> El código de error completo es: Error de Uncaught ReferenceError: login is not defined at HTMLFormElement.onsubmit ((index):1:1)
La página html original que incluye con el script index.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Aveloz</title> <link rel="stylesheet" href="public/css/style.css"> </head> <body> <div> <h1 style="text-align: center;">Loading...</h1> </div> <script type="module" src="public/js/app.js"></script> </body> </html>Dado que importa el javascript como un módulo, debe exportar la función de inicio de sesión:
export function login(e) { ...entonces tendría que importar a su html desde algo que no sea un módulo:
import { login } from './public/js/app.js';