1. Reference Error: Function not defined. 2. Array not getting passed into a function

Question

I have a very basic jsfiddle. I am getting reference error for the function. I fail to understand the reason for the same. Here's the jsfiddle:

https://jsfiddle.net/akshaysuri/xxmq8e3m/

JavaScript:

function f1(){
    var str = "aaa,bbb,ccc,ddd,eee,fff";
    var strArr = str.split(",");
    f2(strArr,strArr.length);
}

function f2(arr,len){
  alert(len);
  alert(arr);
}

HTML:

 <body>
 <button type="button" onclick="f1()">Click Me!</button> 
 </body>

The real problem I am facing in my application is that when I pass the array to f2, only first element is passed to f2 and not the entire array. I was trying to test it using a jsfiddle but first I need to get the reference error resolved.

In the top right of the javascript panel -> click on the settings icon -> Change `Load Type` to a `No Wrap` value — Arun P Johny, Dec 22 '15 at 05:03
there are lot of duplicates - https://www.google.co.in/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=stackoverflow%20jsfiddle%20function%20not%20defined - you can also see http://stackoverflow.com/questions/30692921/why-does-jsfiddle-throw-error-that-function-is-not-defined — Arun P Johny, Dec 22 '15 at 05:07

Joseph Young · Accepted Answer · 2015-12-22T05:11:11.620

1

Try binding it to the window like so

window.f1 = function(){
    var str = "aaa,bbb,ccc,ddd,eee,fff";
    var strArr = str.split(",");
    f2(strArr,strArr.length);
}

As the fiddle is set to onLoad, it wraps your code in window.onload=function(){/*code*/}, meaning that the scope is no longer global.

The real problem I am facing in my application is that when I pass the array to f2, only first element is passed to f2 and not the entire array.

The array is being passed, it's just that alert() formats it exactly as your original string is shown, which is misleading. Try alerting arr[0] or arr[1].

edited Dec 22 '15 at 05:11

answered Dec 22 '15 at 05:00

Joseph Young

2,758
12
23

1

Thanks, it is working with even f1 = function(){ .... }. Can you explain the reason behind this? Why it failed to work with function f1(){....}? – tryingToLearn Dec 22 '15 at 05:03
As Arun said, the load type was set to onLoad. On load wraps your code in a `window.onload=function(){}`, meaning your functions are no longer defined in the global scope. – Joseph Young Dec 22 '15 at 05:10

score 1 · Answer 2 · answered Dec 22 '15 at 05:07

It's a scope problem, Joseph is in the correct way.

EXPLANATION

If you use the window variable you can force the global scope. However you algo can change the declaration order to correct your code.

 <body>
 <script>
 function f1(){
    var str = "aaa,bbb,ccc,ddd,eee,fff";
    var strArr = str.split(",");
    f2(strArr,strArr.length);
}

function f2(arr,len){
  alert(len);
  alert(arr);
}
 </script>
 <button type="button" onclick="f1()">Click Me!</button> 
 </body>

It means that if you declare first your javascript code when the browser interpretes, it'll be able to find your function.

 <body>
 <script>
 function f1(){
 var str = "aaa,bbb,ccc,ddd,eee,fff";
 var strArr = str.split(",");
 f2(strArr,strArr.length);
}

function f2(arr,len){
  alert(len);
  alert(arr);
}
 </script>
 <button type="button" onclick="f1()">Click Me!</button> 
 </body>

1. Reference Error: Function not defined. 2. Array not getting passed into a function

2 Answers2