"function" is not defined error in Javascript: what is the right way to call my function?

Question

I understand a bit because of this post: JQuery, setTimeout not working why it's not working, but keeping everything this way, what is the right way to call _finalvalidate() inside my div?

 <script type="text/javascript">

$(document).ready(function(){

//On Submitting
function _finalvalidate(){
    alert('ppp');
    if(validateName() & validateEmail() & validatePhone()){
        alert('OK');
        return true
    }
    else{
        alert('false');
        return false;
    }
}
});

</script>


<div onclick="_finalvalidate();"> Take action </div>

score 6 · Accepted Answer · edited Nov 30 '11 at 23:54

The jQuery way of doing it would be something like:

<script type="text/javascript">

    $(document).ready(function(){

        //When clicking on the div, execute this 
        $("#validation").click(function() {
            alert('ppp');
            if(validateName() & validateEmail() & validatePhone()){
                alert('OK');
                return true
            }
            else{
                alert('false');
                return false;
            }
        });
    });

</script>
....
<div id="validate"> Take action </div>

If you really want to use the javascript function style, you gonna have to put the function outside the document.ready() function and then you'll be able to call it with the onclick attribute:

<script type="text/javascript">

    function _finalvalidate(){
        alert('ppp');
        if(validateName() & validateEmail() & validatePhone()){
            alert('OK');
            return true;
        }
        else{
            alert('false');
            return false;
        }
    }   


</script>
....
<div onclick="_finalvalidate();"> Take action </div>

In this case you don't have anymore jQuery involved.

Thank you all for your answers, this helped a lot. I decided to use the first example above and it's perfect — Joel, Nov 30 '11 at 23:49

Alex Wayne · Answer 2 · 2011-11-30T23:51:10.097

You should bind your events with jQuery's events, if you are using jQuery. But as far as why it doesn't work, here is some info about JS scoping rules.

Any function that you declare to be used later on should NOT be in the jquery document ready callback. You can't get it because it's hidden inside a function, which provides it's own private scope that you cannot get to from outside.

var f = function() {
  var inner = function() {};
};
inner(); // out of scope

You could export it to the global object, making it available everywhere.

var f = function() {
  window.inner = function() {};
};
inner(); // works!

but the best way is to simply declare it in the global scope in the first place.

var f = function() {}; // Now this function has no purpose anymore at all!
var inner = function() {};
inner(); // works

score 1 · Answer 3 · answered Nov 30 '11 at 23:24

Your function doesn't exist in the scope of the window where you're trying to call it. I would change your code to:

<div id="action">Take Action</div>

And then your JavaScript becomes:

<script type="text/javascript">

$(document).ready(function(){

    //On Submitting
    $('#action').click(function() {
        alert('ppp');
        if(validateName() & validateEmail() & validatePhone()){
            alert('OK');
            return true
        } else {
            alert('false');
            return false;
        }
    });

</script>

Thanks for your answer. Are you telling me it is impossible to call it directly from my div with an "onclick" event? (weither or not its good practice) — Joel, Nov 30 '11 at 23:27

Peter · Answer 4 · 2011-11-30T23:44:12.587

If you want your method to be called from the div's onclick attribute, you'll need to make it available in the global scope. Below are some options. However, I should point out that Option 1 is generally frowned upon these days and Option 2 is just silly. The recommended approach for this kind of thing is to wire up your event handlers unobtrusively, as in Cory's answer.

Option 1

<script type="text/javascript">

function _finalvalidate(){
    alert('ppp');
    if(validateName() & validateEmail() & validatePhone()){
        alert('OK');
        return true
    }
    else{
        alert('false');
        return false;
    }
}

</script>


<div onclick="_finalvalidate();"> Take action </div>

Option 2

<script type="text/javascript">

var _finalvalidate;

$(document).ready(function() {
    _finalvalidate = function(){
        alert('ppp');
        if(validateName() & validateEmail() & validatePhone()){
            alert('OK');
            return true
        }
        else{
            alert('false');
            return false;
        }
    };
});

</script>


<div onclick="_finalvalidate();"> Take action </div>

To elaborate, this puts the function in the global namespace (which is apparently what you want). As written, your function was a local variable of the anonymous function being passed to `document.ready`, and would only be visible inside of that anonymous function. — harpo, Nov 30 '11 at 23:26

JesseBuesking · Answer 5 · 2011-11-30T23:30:12.890

To keep it in jQuery, I'd give your div an id tag and call it using a jQuery onclick event. Also are you sure you want to be doing bitwise & operations in your if, or logical ands &&?

<script type="text/javascript">

$(document).ready(function() {
    $('#callme').click(function() {
        alert('ppp');
        if(validateName() && validateEmail() && validatePhone()){
            alert('OK');
            return true;
        } else {
            alert('false');
            return false;
        }
    }
});

</script>

<div id="callme"></div>

score 0 · Answer 6 · answered Nov 30 '11 at 23:35

The issue with your code is that your function is not defined in the global context, but rather it's defined inside the document.ready callback function. So, when the browser gets the onclick and does an eval of your string, it doesn't find that function name in the global context. You can fix it a number of different ways:

1) Change your function to be defined in the global scope like this:

//On Submitting
window._finalvalidate = function(){

2) Move your _finalvalidate() function outside of the document.ready() so it's in the global scope. There is no reason for it to be in document.ready() because it is not executing right away.

3) Change to the "jQuery" way of specifying event handlers rather than putting onclick=xxx in your HTML as Cory has illustrated in his answer.

"function" is not defined error in Javascript: what is the right way to call my function?

6 Answers6