CODEWITHSUNDEEP
javascriptjquery
enb081
enb081

Reputation: 4061

Unable to define a function in Jquery: "Uncaught ReferenceError: function1 is not defined"

I have:

<textarea class="t1" onchange="function1('1','2','3')"></textarea>

<script type="text/javascript">
    $(function() {
        var function1 = function(p1, p2, p3) {
            alert('p1:' + p1 + ' p2:' + p2 + ' p3:' + p3);
        };
    });
</script>

However when I change the text of the textarea, nothing happens.

I get this error on the console:

Uncaught ReferenceError: function1 is not defined

Live fiddle

Upvotes: 1

Views: 687

Answers (4)

hjpotter92
hjpotter92

Reputation: 80649

  1. Change the position where your function is being defined (in fiddle, check the second dropdown near jQuery selection box)
  2. Move the function definition outside of domReady declaration.

Currently, your function is parsed like this:

$(window).load(function(){
var function1 = function (p1, p2, p3) {
    alert('p1:' + p1 + ' p2:' + p2 + ' p3:' + p3);
};
});

You need it inside the head tag instead. Chose no wrap - in <head> option from dropdown.

Upvotes: 1

Shikiryu
Shikiryu

Reputation: 10219

If you're using jQuery :

<textarea class="t1"></textarea>

<script type="text/javascript">
    $(function() {
        $('.t1').on('change', function(){
            function1('1','2','3');
        });
        var function1 = function(p1, p2, p3) {
            alert('p1:' + p1 + ' p2:' + p2 + ' p3:' + p3);
        };
    });
</script>

http://jsfiddle.net/U4sx7/

That makes me learn that the event change on a textarea is like blur for jQuery… Not sure, that's what you want in the end.

EDIT after comment

<textarea class="t1" data-pam1="1" data-pam2="2" data-pam3="3"></textarea>

<script type="text/javascript">
    $(function() {
        var function1 = function(p1, p2, p3) {
                alert('p1:' + p1 + ' p2:' + p2 + ' p3:' + p3);
        };
        $('.t1').on('change', function(){
           var param1 = $(this).data('pam1'),
               param2 = $(this).data('pam2'),
               param3 = $(this).data('pam3');
           function1(param1,param2,param3);
         });
     });
</script>

http://jsfiddle.net/U4sx7/1/

Upvotes: 1

svineet
svineet

Reputation: 1889

That is because your function1 is only in the scope of the anonymous function passed to jQuery.
As you're using jQuery, why not use it fully? Attach a .change() handler to .t1 -

$(function () {
  $(".t1").change(function(){
    alert("Do your thing here");
  });
});

Updated Fiddle

Upvotes: 0

GautamD31
GautamD31

Reputation: 28753

Try like this

 <script type="text/javascript">
        var function1 = function(p1, p2, p3) {
            alert('p1:' + p1 + ' p2:' + p2 + ' p3:' + p3);
        };
 </script>

 <textarea class="t1" onchange="function1('1','2','3')"></textarea>

Nothing first you need to define(initialize) the function and then you can call it....and dont define it under 

$(function(){..HERE..})

then it comes under GLOBAL scope

Upvotes: 1

Related Questions