Calling a Function in Javascript
<p>I have declared a function for showing a dialog box in jQuery</p>

<pre><code>&lt;script type="text/javascript"&gt;
function showDialog(str,strtitle)
 {
if(!strtitle) strtitle='Error message';
$('#dialog').dialog('destroy');
$('#dialog').show();
$('#dialog').html(str);
$("#dialog").dialog({
    resizable: false,
    width: 400,
    color: '#BF5E04',
      open: function () {
                    $(this).parents(".ui-dialog:first").find(".ui-dialog
                                titlebar").addClass("ui-state-error");},

    buttons: {"Ok": function() { 
    $(this).dialog("close");    }},

    overlay: { opacity: 0.2, background: "cyan" },title:strtitle});}
   &lt;/script&gt;
</code></pre>

<p>And I'm calling this function, in another javascript code:</p>

<pre><code>   &lt;script type="text/javascript"&gt;
    var myFile = document.getElementById('myfile');
    //binds to onchange event of the input field
    myFile.addEventListener('change', function() {
    //this.files[0].size gets the size of your file.
     var  size = this.files[0].size;
     document.write(showDialog('size','File Size Exceeds')); 
      });
     &lt;/script&gt;
</code></pre>

<p>When I execute the function, it writes Undefined, Why the dialog box is not showing. The first function is declred in the head, and the second in the body portion.</p>
