I'm making a website which welcoms a user with their email, after they log in, but after I submit an email, the heading dissapears, which is supposed to be on the website, which is made from a message and an email.
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>Thanks.
change your type of button in second form. It will prevent your page from reload and you will get your results.
<!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>