Question

我无法在单击按钮时调用功能。我查看了其他问题并实施了这些内容中的内容，但标题出现错误。我在做什么错了？

HTML代码

<!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");
        };
     }
});

Answer 1

landing_page.js

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

在您的代码中，submitInput在onload回调中声明，并且在全局范围内不可用。

如果您希望在文档加载后声明submitInput并且仍然在全局范围内可用，请执行以下操作：

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

Answer 2

页面无法访问您的函数定义。将您的.js文件修改为

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

即删除这些行：

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

Javascirpt：未捕获的TypeError：对象不是函数HTMLButtonElement.onclick

2 个答案: