CODEWITHSUNDEEP
javascripthtml
code-8
code-8

Reputation: 58790

Uncaught ReferenceError: [ function_name ] is not defined

I have an upload file button.

enter image description here

Note : onclick="getFile()"

So the getFile() function will be call when the btn is clicked.

HTML

<center>
    <form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
        <div id="yourBtn" onclick="getFile()">click to upload a file</div>
        <div style='height: 0px;width: 0px; overflow:hidden;'>
            <input id="upfile" type="file" value="upload" onchange="sub(this)" />
        </div>
    </form>
</center>

CSS

#yourBtn {
    position: relative;
    top: 150px;
    font-family: calibri;
    width: 150px;
    padding: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border: 1px dashed #BBB;
    text-align: center;
    background-color: #DDD;
    cursor:pointer;
}

JS

 $(window).load( function () {
     
     // executes when complete page is fully loaded, including all frames, objects and images  
     function getFile() {
         document.getElementById("upfile").click();
     }

     function sub(obj) {
         var file = obj.value;
         var fileName = file.split("\\");
         document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
         document.myForm.submit();
         event.preventDefault();
     }

 });

I've tried placing all my JS code within the $(window).load( function (){});

I kept getting error on my console say Uncaught ReferenceError: getFile is not defined

Why is that, and how do I fix it?

If you need, I've put together my FIDDLE here.

Upvotes: 1

Views: 983

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1075427

Functions you call from onXyz attribute-style handlers must be globals, but your getFile function isn't global, it's only accessible from within your load callback. (This is good. Globals are a Bad Thing.(tm))

Your best bet is to hook up the handler from within load (and the same for sub):

<div id="yourBtn">click to upload a file</div>
<!-- ... -->
<input id="upfile" type="file" value="upload" />

Then:

$(window).load( function () {

    $("#yourBtn").on("click", getFile);
    $("#upfile").on("change", sub);

    // ...

});

Off-topic, but you might also consider using something other than $(window).load(...), which happens very late in the page loading process. If you control where your script tags go, just put your script tag at the very end of the file, just before the closing </body> tag, and change

$(window).load(function() {
    // ...
});

to

(function() {
    // ...
})();

If you don't control where your script tag goes, then a second-best solution is to use jQuery's ready callback:

$(function() {
    // ...
});

Upvotes: 2

adeneo
adeneo

Reputation: 318332

Remove the $(window).load handler so the function is in the global scope, and it will work.

When the function is inside the load handler it's local to that scope only and can't be accessed from inline handlers that require the function to be in the global scope.

FIDDLE

Also note that jsFiddle wraps the function in it's own onload handler unless you change the dropdown on the left to "nowrap in ***".

You should be using jQuery's event handlers instead.

Upvotes: 1

Related Questions