onclick on my button does not work, throws errors

Question

I have crated a login form in a div that is hidden, and when i click the "Login" button I want the login form to appear and this is done in a javascript fucntion that I have created to get triggered with onclick on the Login button. But when I click on the button I get these errors,

Uncaught ReferenceError: showDiv is not defined at HTMLButtonElement.onclick ((index):72:29)

I have read different answers for this type of question but nothing seems to work for me.

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">
            &copy; 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>

Where is the script tag placed, please place it below the html itself and also remove the @Section and place the entire script tag outside the section and try — Ambareesh, Jul 08 '23 at 04:56
If i remove the @section other errors will occur, it needs to be set there — dev-113, Jul 08 '23 at 10:24
Ok.. In layout page at the end of body tag can you remove the render section statement and try — Ambareesh, Jul 08 '23 at 14:08

Halcyon · Answer 1 · 2023-07-08T01:20:42.070

-3

Try

<button onclick="showDiv">Login</button>

(without the brackets)

JavaScript runs as soon as the HTML page is loaded and showDiv() is a function call. So it's called, and the output of that function is passed to the onclick-handler. By changing it to showDiv you're now instead passing a reference to the function to the onclick handler, which is what you wanted.

edited Jul 08 '23 at 01:20

answered Jul 08 '23 at 01:00

Halcyon

57,230
10
89
128

I tried without the brackets but still gives me the same error. – dev-113 Jul 08 '23 at 09:47
The HTML parser uses the text content of an inline `onEvent` attribute in HTML source, of an element, as the code body of a function it creates and adds to the element as an event listener. The parser does not call the handler it adds, and `onclick=showDiv` creates a handler with only the expression statement`showDiv;` as its body. – traktor Jul 08 '23 at 13:38
I'm sorry but I didn't quite understand this. – dev-113 Jul 08 '23 at 23:27
@dev-113 _If_ you are asking about my comment above, this answer would apply if you were setting the `onclick` property of an element _from within JavaScript_ , but does not apply to `onclick` code supplied using an inline attribute within HTML source. See a [previous answer](https://stackoverflow.com/a/50744889/5217142) of mine for more technical detail. – traktor Jul 09 '23 at 02:35
@traktor apparently trying to use @ section scripts in partial view and then using the partial view in _Layout view does not work, the scripts wont fucntion normally. – dev-113 Jul 10 '23 at 23:53

onclick on my button does not work, throws errors

1 Answers1