Estoy creando un sitio web que da la bienvenida a un usuario con su correo electrónico, después de que inicia sesión, pero después de enviar un correo electrónico, desaparece el encabezado, que se supone que está en el sitio web, que está hecho de un mensaje y un correo electrónico.
function logIn() { var email = document.getElementById("email").value; var password = document.getElementById("password").value; var welcomeVar = document.createElement("h1"); welcomeVar.innerHTML ="Welcome, " + email; document.getElementById("Welcome").appendChild(welcomeVar); } <!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"> <link rel="stylesheet" href="index.css"> <title>Solved! - Home</title> </head> <body> <div style="text-align: center"> <img src="logo.png" position="centre"> </div> <form> <p>Log in</p> <input placeholder="email" id="email"type="email"> <br> <input placeholder="password" id="password" type="password"><br> <button onclick="logIn();"><h2>Log in</h2></button> </form> <form style="text-align: center"> <input type="text" class="search"placeholder="Type your problem here: "> <button><h2>Submit</h2></button> </form> <div id="Welcome"> </div> <script src="index.js"></script> </body> </html>Gracias.
cambie su tipo de button en segunda form . Evitará que su página se vuelva a cargar y obtendrá sus resultados.
<!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"> <link rel="stylesheet" href="index.css"> <title>Solved! - Home</title> </head> <body> <div style="text-align: center"> <img src="logo.png" position="centre"> </div> <form> <p>Log in</p> <input placeholder="email" id="email" type="email"> <br> <input placeholder="password" id="password" type="password"><br> <button onclick="logIn();"> <h2>Log in</h2> </button> </form> <form style="text-align: center"> <input type="text" class="search" placeholder="Type your problem here: "> <button type="button"> <h2>Submit</h2> </button> </form> <div id="Welcome"></div> <script> function logIn() { let email = document.getElementById("email").value; let password = document.getElementById("password").value; let welcomeVar = document.createElement("h1"); welcomeVar.innerText = `Welcome, ${email}`; document.getElementById("Welcome").appendChild(welcomeVar); } </script> </body> </html>