current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite 
$(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?

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

2 Answers 2

up vote 2 down vote accepted

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.

share|improve this answer
    
both work. thank you very much. can I ask why we don't have to do getPick() on either or? –  EasyBB Jun 1 '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 1 '13 at 23:14
    
oh my bad, completely skipped that part :D Thank you for the explanations. –  EasyBB Jun 1 '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 1 '13 at 23:16
1  
@EasyBB: Check these tutorials by John Resig (creator of jQuery). ejohn.org/apps/learn –  elclanrs Jun 1 '13 at 23:27
up vote 1 down vote

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]';
    });
});
share|improve this answer
    
Since the element is dynamic wouldn't it be .on('click') ? –  EasyBB Jun 1 '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 1 '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 1 '13 at 23:15
    
I did upvote though –  EasyBB Jun 1 '13 at 23:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.