CODEWITHSUNDEEP
javascripthtml
Hank McDonnel
Hank McDonnel

Reputation: 125

Javascirpt: Uncaught TypeError: object is not a function HTMLButtonElement.onclick

I am unable to invoke a function on clicking a button. I ve looked at other questions and implemented what is present in those yet I am getting the error in the title. What am I doing wrong?

HTML code

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>TITLE</title>
    <link rel="stylesheet" href="/static/css/semantic.min.css">
    <script type="text/javascript" src="/static/js/libs/jQuery.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>HEADER</h1>
      <div>
        <button class="ui button primary" onclick="submitInput();">
            BUTTON
        </button>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="/static/js/landing_page.js" async></script>
</html>

landing_page.js

$(document).ready(function() {
     window.onload = function(){
        function submitInput() {
            console.log("Submit");
        };
     }
});

Upvotes: 0

Views: 1138

Answers (2)

ponury-kostek
ponury-kostek

Reputation: 8060

landing_page.js

function submitInput() {
  console.log("Submit");
};

In your code submitInput is declared in onload callback and is not available in global scope.

If you want submitInput to be declared after document is loaded and still be available in global scope do:

$(document).ready(function() {
  window.submitInput = function(){
    console.log("Submit");
  }
});

Upvotes: 3

basdanny
basdanny

Reputation: 79

The definition of your function is not accessible to the page. Edit your .js file to be 

function submitInput() {
   console.log("Submit");
};

i.e., remove these lines:

 $(document).ready(function() {
         window.onload = function(){

Upvotes: 0

Related Questions