Vanilla JavaScript with Function, function not defined

Question

$(function() {
 var script = document.createElement('script');
 script.id="filepicker";
 script.type="text/javascript";
 script.src="//api.filepicker.io/v1/filepicker.js";
 var body=document.querySelectorAll("body")[0]; ;
 body.appendChild(script);
 var ButtonsArea = document.querySelectorAll('.frm-buttons')[0];
 var textArea = document.getElementById('text_editor_textarea');
 var button = document.createElement('span');
 var divText=document.createTextNode("Upload File");
 button.id="newDoc";
 button.setAttribute("onclick","getPick()");
 button.appendChild(divText);
 ButtonsArea.appendChild(button);

  function getPick(){
   filepicker.setKey('AWpNcAmH9TmiWtEgHsFwBz');
   filepicker.pick({
    mimetypes: ['text/*'],
    services:['COMPUTER'],
    maxSize:50*1024
   },function(FPFile) {
     var docFile = FPFile.url;
     textArea.value=textArea.value+'[url]'+FPFile.url+'+'+FPFile.filename+'[/url]';
     });
  }
});

my getPick() function is being said it is not defined is there something that I am missing from all of the JavaScript, maybe the JavaScript timing is off since everything is being created dynamically?

Not sure what the problem is but setting the click event as an attribute with a string is not good practice. Try using `addEventListener` and pass the function as an object, that's the beauty of JS. — elclanrs, Jun 01 '13 at 23:05
ok, see this is my first Vanilla code :D so what do I do? button.addEventListener('click',getPick()); ? — EasyBB, Jun 01 '13 at 23:08

score 2 · Accepted Answer · answered Jun 01 '13 at 23:09

2

The problem is that when you declare a function within the scope of another function, it is limited to the scope of that function. When you call getPick() on the element's onclick attribute, it is executed in the global scope. getPick doesn't exist there.

You can instead simply assign the function as the onclick property:

button.onclick = getPick;

You can increase the flexibility of your code by using addEventListener, which would look like this:

button.addEventListener('click', getPick, false);

This allows you to have more than one click handler on the button if you should so choose, but it isn't compatible with old versions of Internet Explorer. button.onclick = is compatible with almost all browsers going back a very long way into Internet history!

Note that in both those cases you are using getPick rather than getPick(). The former is a reference to the function; the latter executes the function and gives you its return value.

answered Jun 01 '13 at 23:09

lonesomeday

233,373
50
316
318

both work. thank you very much. can I ask why we don't have to do getPick() on either or? – EasyBB Jun 01 '13 at 23:13
As I say in my answer, `getPick` means "give me a reference to the function, so we can execute it later", while `getPick()` means "execute the function now and give me its return value". – lonesomeday Jun 01 '13 at 23:14
oh my bad, completely skipped that part :D Thank you for the explanations. – EasyBB Jun 01 '13 at 23:16
@EasyBB: Read on "first class" functions. JavaScript is a functional language, functions are just objects that you can pass around. Once you understand that, read about "higher order" functions and you're in JavaScript paradise :) – elclanrs Jun 01 '13 at 23:16
lol. @elclanrs do you possibly have a document I read about this? – EasyBB Jun 01 '13 at 23:22
1

@EasyBB: Check these tutorials by John Resig (creator of jQuery). http://ejohn.org/apps/learn/ – elclanrs Jun 01 '13 at 23:27

score 1 · Answer 2 · answered Jun 01 '13 at 23:07

1

The getPick() function is defined locally inside the anonymous on-ready function, so it's not visible to the onclick handler.

Try moving the getPick function outside the $(function() { }); block.

Alternatively, use proper event handling, something like the following:

button.click(function() {
    filepicker.setKey('AWpNcAmH9TmiWtEgHsFwBz');
    filepicker.pick({
        mimetypes: ['text/*'],
        services:['COMPUTER'],
        maxSize:50*1024
    }, function(FPFile) {
        var docFile = FPFile.url;
        textArea.value=textArea.value+'[url]'+FPFile.url+'+'+FPFile.filename+'[/url]';
    });
});

answered Jun 01 '13 at 23:07

jcsanyi

8,133
2
29
52

Since the element is dynamic wouldn't it be .on('click') ? – EasyBB Jun 01 '13 at 23:10
It's being created dynamically, but only once... so setting a handler directly like this will work, since it's being set on the object after it's created. – jcsanyi Jun 01 '13 at 23:11
oh ok thanks, only reason I won't accept this is because .click() is jQuery and I am actually learning Vanilla now, I was bad and learned jQuery first so – EasyBB Jun 01 '13 at 23:15

Vanilla JavaScript with Function, function not defined

2 Answers2