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
– elclanrs, Commented Jun 1, 2013 at 23:05
ok, see this is my first Vanilla code :D so what do I do? button.addEventListener('click',getPick()); ? — EasyBB
– EasyBB, Commented Jun 1, 2013 at 23:08

lonesomeday · Accepted Answer · 2013-06-01 23:09:11Z

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 1, 2013 at 23:09

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

EasyBB Over a year ago

both work. thank you very much. can I ask why we don't have to do getPick() on either or?

lonesomeday Over a year ago

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".

EasyBB Over a year ago

oh my bad, completely skipped that part :D Thank you for the explanations.

elclanrs Over a year ago

@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 Over a year ago

@EasyBB: Check these tutorials by John Resig (creator of jQuery). ejohn.org/apps/learn

|

jcsanyi · Accepted Answer · 2013-06-01 23:07:41Z

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 1, 2013 at 23:07

jcsanyi

8,2042 gold badges31 silver badges52 bronze badges

3 Comments

EasyBB Over a year ago

Since the element is dynamic wouldn't it be .on('click') ?

jcsanyi Over a year ago

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.

EasyBB Over a year ago

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

Collectives™ on Stack Overflow

Vanilla JavaScript with Function, function not defined

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related