I have implemented a login form within a hidden div, and upon clicking the "Login" button, I want the form to be displayed. This functionality is achieved through a JavaScript function that I created to be triggered on onclick event of the Login button. However, when I click on the button, I encounter these errors,
Uncaught ReferenceError: showDiv is not defined at HTMLButtonElement.onclick ((index):72:29)
Despite looking into various solutions for this issue, nothing seems to resolve it for me.
Here is my code:
@section Scripts {
<script>
function showDiv() {
console.log("pressed");
document.getElementById("login-popup").style.display = "flex";
}
</script>
@{
await Html.RenderPartialAsync("_ValidationScriptsPartial");
}
}#login-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
#login-popup-content {
background-color: #fff;
padding: 20px;
border-radius: 5px;
}
#login-popup-content h2 {
text-align: center;
}
#login-popup-content .form-group {
margin-bottom: 10px;
}
#login-popup-content input[type="text"],
#login-popup-content input[type="password"] {
width: 100%;
padding: 5px;
}<button onclick="showDiv()">Login</button>
<div id="login-popup">
<div id="login-popup-content">
<h2>Login</h2>
<form asp-action="Login">
<div id="form-group">
<input asp-for="@Model.LoginVM.Username" placeholder="Username" required />
<span asp-validation-for="@Model.LoginVM.Username"></span>
</div>
<div id="form-group">
<input asp-for="@Model.LoginVM.Password" placeholder="Password" required />
<span asp-validation-for="@Model.LoginVM.Password"></span>
</div>
<div id="form-group">
<input type="submit" value="Login" />
</div>
</form>
</div>
</div>EDIT:
This is how my _Layout looks like.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - The Burning Apron</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/TheBurningApron.styles.css" asp-append-version="true" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<partial name="Login">
<div id="navbar">
<ul>
<li>
<a href="/index">Home</a>
</li>
<li>
<a href="/recipe-categories">Recipes</a>
</li>
<li>
<a href="/favorites">Favorites</a>
</li>
<li>
<a href="/about-us">About us</a>
</li>
</ul>
<br />
<br />
<hr />
</div>
@RenderBody()
<footer class="border-top footer text-muted">
<div class="container" style="color: black">
© 2023 - The Burning Apron -
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
</html>