Javascript onclick object is not a function

Question

So I've been trying to figure this out for hours

Here is the error I'm getting:

error

I don't understand what is causing the error, any insight would be appreciated!

And here is my code, disregard the smarty syntax:

<html>
    <head>
        <title>{$title}</title>
        {include file='header/header.tpl'}
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container" style="padding-top: 5%;">
        <form action="" method="POST">
            <center>
                <img src="" style="height: 70px;">
            </center>
            <div class="form-signin">
                <input type="email" class="form-control" style="font-size: 10pt;" id="email" placeholder="Email Address" required autofocus>
                <input type="password" class="form-control" style="font-size: 10pt;" id="password" placeholder="Password" required>
                <input type="submit" class="btn btn-warning btn-sm" value="Login" data-loading-text"Login" id="login" onClick="login();" style="outline: none;">
            </div>
        </form>
    </div>
    {literal}
    <script type="text/javascript">
        $(function() {
            function login() {
                alert('asdf');
            }
        });
    </script>
    {/literal}
    </body>
</html>

login is not in scope. Add the event in JavaScript not in the markup. — elclanrs
– elclanrs, Commented Aug 31, 2014 at 20:30
Aside from the scope issue, both the login function and the input with id="login" can be references with login, so you're ending up with a name-collision here. — haim770
– haim770, Commented Aug 31, 2014 at 20:34
Do $('#login').click(login) or add a "submit" event to the form — elclanrs
– elclanrs, Commented Aug 31, 2014 at 20:35

Ibu · Accepted Answer · 2014-08-31 20:33:00Z

2

Move login outside of the ready function:

<script type="text/javascript">
    $(function() {
        function login() {
            alert('asdf');
        }
    });
</script>

To:

<script type="text/javascript">
        function login() {
            alert('asdf');
        }
</script>

The problem was login only existed inside the ready function scope. Example

function say() {

   function hello() {
       alert("hello");
   }

   // call hello inside the say scope
   hello(); // this displays the alert
}


say(); // this will show the alert

hello(); // error function is not defined. because it is out of scope

answered Aug 31, 2014 at 20:33

Ibu

44k14 gold badges82 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guffa · Accepted Answer · 2014-08-31 20:33:24Z

0

The login function is created inside the ready event handler, so it only exists inside that function.

Put it outside the event handler, so that it exists in the global scope, then you can call it from the click event handler:

<script type="text/javascript">

    function login() {
      alert('asdf');
    }

    $(function() {
    });

</script>

Consider using the submit event of the form instead of a click event on the button. Then it will also work if the user submits the form by pressing enter in a field. Also consider binding the event in the script instead of in the markup:

<script type="text/javascript">

    $(function() {

      $('form').submit(function(e){
        e.preventDefault(); // if you want to stop the submit and do something else'
        alert('asdf');
      });

    });

</script>

answered Aug 31, 2014 at 20:33

Guffa

703k112 gold badges760 silver badges1k bronze badges

6 Comments

1252748 Over a year ago

I'm curious why a function declared with jquery "ready" isn't able to be called. I tested it in jsbin, you're definitely right, but why is that?

Guffa Over a year ago

@thomas: Javascript has function scope, which means that variables that you declare inside a function only exist inside that function. That also goes for functions, so when you declare a function inside another function, it can't be accessed outside of it.

1252748 Over a year ago

is there any way around that? I'm just curious, clearly there is no need to do it any other way than you suggest. onClick="$.login()" didn't work for me, but is there anyway to access functions stored in other functions?

Guffa Over a year ago

@thomas: Not unless the outer function exposes the inner function, either by putting a reference to it in a global variable, or returning a reference to it so that you can assign the return value to a global variable.

1252748 Over a year ago

Hmm..not sure I understand I understand. Would you mind providing an example for one or both? Thanks!

|

Collectives™ on Stack Overflow

Javascript onclick object is not a function

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related