如何将HTML按钮和javascript逻辑分离到不同的文件中

How to separate HTML button and javascript logic into different files

本文关键字：分离 文件 HTML 按钮 javascript      更新时间：2023-09-26

我需要喜欢将HTML文件中的按钮和它的点击javascript函数拆分到javascript文件中。

以下是我迄今为止所尝试的：

试用1：结合HTML子按钮按钮和按钮的点击功能

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
   </head>
   <body>
      <form id="advertiseForm" name="advertiseForm"   method="post" >
         <br /><br /><br />
         <div style="text-align:center">
            <input class="button button2" id="submitbutton" type="button" value="Submit" />
         </div>
         <script>
            $( "#submitbutton" ).on( "click", validatelanded );
            function validatelanded( event ){
               alert( "Hello." );
            }
         </script>
      </form>
   </body>

试用2：将HTML文件中的HTML sumitbutton按钮及其点击功能分离到js文件中。

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script type="text/javascript" src="advertisementlandedvalidationatclient.js"></script>
   </head>
   <body>
      <form id="advertiseForm" name="advertiseForm"   method="post" >
         <br /><br /><br />
         <div style="text-align:center">
            <input class="button button2" id="submitbutton" type="button" value="Submit" />
         </div>
      </form>
   </body>

advertisemandedvalidationtclient.js文件

<script type="text/javascript">
   $( "#submitbutton" ).on( "click", validatelanded );
       function validatelanded( event ){
          alert( "Hello." );
   }
</script>

试用版1有效（我看到警报），试用版2无效（我看不到警报）。可能出了什么问题？

试用版1有效（我看到警报），试用版2无效（我看不到警报）。可能出了什么问题？

在第一次试用中，脚本位于html的底部。因此，当html被呈现时，脚本将被解析，相应的事件处理程序将被绑定。这是可以的，因为有一个具有指定id的按钮。

另一方面，在第二次尝试中，您已经将脚本加载到html的head标记中。此时js被解析，并且没有任何按钮来绑定此事件此外，不需要在外部js文件中使用<script>标记。当我们在html文件中编写脚本时，我们使用这个标记。以下内容完全可以。

<script type="text/javascript" src="advertisementlandedvalidationatclient.js"></script>

如果你尝试这样做，那么问题就会得到解决：

$(function(){
    $( "#submitbutton" ).on( "click", validatelanded );
    function validatelanded( event ){
        alert( "Hello." );
    }
})

现在，当文档准备就绪时，换句话说，当浏览器呈现html时，您将绑定相应的事件处理程序。

顺便说一下，在html页面的底部加载脚本是一种更好的做法。根据渐进增强，这是一个很好的做法。

相关文章：