2

I'm calling my function in my HTML, and even though the function originates in the same file I'm receiving an error stating that the function is undefined. I cleared the browser cache, but with no luck.

I tried calling the function in a click event in the same <script>, but the click event wasn't recognized at all:

$("#addFileButton").on("click", function() {
  uploadFile();
  console.log("click")
})

This is what my code looks like now:

<!-- HTML -->
<input id="getFile" type="file" multiple="multiple"/><br />
<input id="addFileButton" type="button" value="upload" onclick="uploadFile();" />
<!-- etc -->
</div>

<script>
  function uploadFile() {
    // code
  }
</script>

JSFiddle link: https://jsfiddle.net/Tsardines/Lrcgfjhq/5/

19
  • 2
    You are missing either # in $("addFileButton") Feb 28, 2020 at 21:01
  • 1
    why you define two Onlick events Feb 28, 2020 at 21:04
  • @Rkv88-Kanyan It's just what I tried (jQuery onClick, not working) and what I'm trying now (HTML inline onclick, not working either). I never have both of them at the same time.
    – Bodrov
    Feb 28, 2020 at 21:04
  • 1
    If JS says the function is not defined, then it is not defined. Was the script containing the function really loaded? If there's a syntax error in the function, that makes it also undefined.
    – Teemu
    Feb 28, 2020 at 21:04
  • @CarstenLøvboAndersen I added it back to the example, thanks. The jQuery click event still isn't working, though.
    – Bodrov
    Feb 28, 2020 at 21:05

3 Answers 3

0

I have validated, It is working fine. see here - jsbin.com/nuzuqomoku/edit?html,js,console,output

1
  • 1
    Please don't answer with a link. Feb 28, 2020 at 21:26
0

Add a click event through jquery and then call the uploadFile method inside it

<html>
    <head>    
    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Bootstrap JS -->
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>

    </head>
    <body>
        <!-- HTML -->
        <input id="getFile" type="file" multiple="multiple"/><br />
        <input id="addFileButton" type="button" value="upload"  />
       
        <!-- etc -->
        </div>
        <script>
            $(document).ready(function(){
                function uploadFile(){
                alert('File Uploaded');
            }
                $("#addFileButton").on("click", function() {
                uploadFile();
                console.log("click")
                });
         
           });
         
        </script>
      
    </body>
</html>

0

If this is the code:

<!-- HTML -->
<input id="getFile" type="file" multiple="multiple"/><br />
<input id="addFileButton" type="button" value="upload" onclick="uploadFile();" />
<!-- etc -->
</div>

<script>
  function uploadFile() {
    // code
  }
</script>

I don't see a problem with this code. Please make sure that you save and load the right file. You might just forget to load the right file. ^_^

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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