Uncaught ReferenceError: myFunction is not defined

Question

Gives an error. I have placed the code just before </body>. Still getting the error.

<form action="" method="get" id="searchform" >
<input name="q" type="text" id="search" size="32" maxlength="128" class="txt">
<input type="button" id="hit" value="Search" onclick="myFunction();return false" class="btn">   
</form>

JS,

<script type="text/javascript">
    var nexturl = "";
    var lastid = "";
    var param;
    $(document).ready(function () {
        function myFunction() {
            param = $('#search').val();
            alert("I am an alert box!");
            if (param != "") {
                $("#status").show();
                var u = 'https://graph.facebook.com/search/?callback=&limit=100&q=' + param;
                getResults(u);
            }
        }
        $("#more").click(function () {
            $("#status").show();
            $("#more").hide();
            pageTracker._trackPageview('/?q=/more');
            var u = nexturl;
            getResults(u);
        });
    });
</script>

Just get rid of the `$(document).ready()` construct. It's not needed when you have your code at the bottom. — the system, Mar 02 '13 at 06:06
Bind the event handler with jQuery instead of using `onclick`. — Blender, Mar 02 '13 at 06:10

ATOzTOA · Accepted Answer · 2013-03-02T07:17:10.020

15

You cannot place myFunction after the onclick. When the onclick is seen there is no definition for myFunction.

Place the JavaScript in <head> tag. Also, move the function outside of ready().

Like this:

<script type="text/javascript">
var nexturl ="";
var lastid ="";
var param;

function myFunction() {
    param = $('#search').val();
    alert("I am an alert box!");
    if (param != "") {
        $("#status").show();
        var u = 'https://graph.facebook.com/search/?callback=&limit=100&q='+param;
        getResults(u);
        }
}

$(document).ready(function() {

  $("#more").click(function () { 

    $("#status").show();
    $("#more").hide();  
    pageTracker._trackPageview('/?q=/more');
    var u = nexturl;
    getResults(u);
  });

});
</script>
</head>
<body>
...

edited Mar 02 '13 at 07:17

answered Mar 02 '13 at 06:00

ATOzTOA

34,814
22
96
117

1

It doesn't matter if `myFunction` is before or after the `onclick` attribute. It only matters that it is hidden in the variable scope of the `.ready()` handler.. – the system Mar 02 '13 at 06:04
@ATOzTOA: Moved the code outside but still it doesn't seem to work. – Mar 02 '13 at 06:14
Moved the function outside the ready block and moved the complete code in the head and it worked. – Mar 02 '13 at 06:18

PSR · Answer 2 · 2013-03-02T06:42:41.020

5

keep myFunction in script tag directly

 i.e
   <script>

function myFunction() {
  .....  
}
 </script>

edited Mar 02 '13 at 06:42

answered Mar 02 '13 at 06:00

PSR

39,804
41
111
151

please mark it as answer if you got the solution with this answer :) – PSR Mar 02 '13 at 06:04

score 1 · Answer 3 · edited Mar 02 '13 at 06:15

1

From the jQuery docs:

The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.

So your function isn't created until after your onclick is established. Thus it can't find the function. You'll want to move it outside the $(document).ready(function(){}).

edited Mar 02 '13 at 06:15

Derek 朕會功夫

92,235
44
185
247

answered Mar 02 '13 at 06:02

Cianan Sims

3,419
1
21
30

@FahadUddin What happens the second time? Are you seeing an error? – Cianan Sims Mar 02 '13 at 09:29
The function runs again but does not perform the task it perfomrms at first – Mar 02 '13 at 09:31
@FahadUddin It's working for me; however, the returned results are being appended to the current status list. Maybe they should replace it? – Cianan Sims Mar 02 '13 at 09:36
Thanks. I just observed that. – Mar 02 '13 at 09:39
Just add `$('#data').empty()` to the top of the `success` function, if you don't want the previous results to persist. And if you found my answer helpful, feel free to mark it as your answer. – Cianan Sims Mar 02 '13 at 09:39

score 0 · Answer 4 · answered Mar 21 '18 at 23:55

You have to move the function outside the $document.ready here then you will have two options: 1st move it to <head> or 2nd move it right before the closing $document.ready bracket. Use this type of declaration for your function myFunction(){alert("inside my function");};

Uncaught ReferenceError: myFunction is not defined

4 Answers4

Linked