I'm new to web design and currently working on a website project. My concept involves hiding the #login-box when the user clicks on the login button, and displaying another element (.dashboard) in its place.
Initially, I set the .dashboard class to have display: none so it would be hidden by default. Then, I wrote some JavaScript code to hide the #login-box and show the .dashboard element upon clicking the login button.
My Code:
const loginBoxEl = document.getElementById("login-box");
const loginBtnEl = document.getElementById("login-btn");
const dashboardEl = document.getElementById("dashboard");
loginBtnEl.addEventListener("click", function() {
loginBoxEl.style.display = "none";
dashboardEl.style.display = "block";
});#login-box {
height: 100vh;
}
#login-area {
border-radius: 8px;
box-shadow: 5px 5px 10px lightgray;
}
#dashboard {
display: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Unique Webpage Title</title>
<link rel="stylesheet" href="./styles.css>
</head>
<body>
<div id="login-box>
<div id="login-area">
<h1>Welcome to Our Website</h1>
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<button id="login-btn">Login</button>
</div>
</div>
<div id="dashboard">
<h1>Dashboard</h1>
</div>
<script src="./main.js"></script>
</body>
</html>Although the .dashboard is correctly displayed upon clicking the login button, the #login-box does not disappear despite the inline CSS setting display: none.
How can I address this issue?