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

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

javascript jquery html

如何将HTML按钮和javascript逻辑分离到不同的文件中,javascript,jquery,html,Javascript,Jquery,Html,我需要在HTML文件中拆分按钮，并将其单击javascript函数转换为javascript文件以下是我迄今为止所尝试的：试用版1：组合HTML submitbutton按钮和按钮的单击功能 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></scri

我需要在HTML文件中拆分按钮，并将其单击javascript函数转换为

javascript

文件

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

试用版1：组合HTML submitbutton按钮和按钮的单击功能

<!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>






$（“#提交按钮”）。在（“单击”，带下划线）；
函数validatelanded（事件）{
警惕（“你好”）；
}

试用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>

AdvertisementLandValidationAtClient.js文件

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

   }
</script>


$（“#提交按钮”）。在（“单击”，带下划线）；
函数validatelanded（事件）{
警惕（“你好”）；
}

试用版1有效（我看到警报），试用版2无效（我没有看到警报）。有什么不对劲吗

试用版1起作用（我看到警报），试用版2不起作用（我看不到警报）警惕）。有什么不对劲吗

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

另一方面，在第二次试验中，您已经将脚本加载到html的head标记中。此时js已被解析，没有任何按钮可绑定此事件此外，不需要在外部js文件中使用

标记。当我们在html文件中编写脚本时，我们使用这个标记。以下是非常好的

如果您尝试此操作，则问题将得到解决：

$(function(){
    $( "#submitbutton" ).on( "click", validatelanded );

    function validatelanded( event ){
        alert( "Hello." );
    }
})

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

顺便说一下，在html页面底部加载脚本是一种更好的做法。根据.

从.js文件中删除脚本标记

。您的控制台说问题出在哪里？@Amit yes已删除，并且可以正常工作。为什么？我认为这对于一个单独的js文件是必要的。

是一个HTML标记/元素/实体，它在JavaScript中“不存在”。当您将外部JavaScript fire加载到包含

元素的HTML文档中时，内容将被解析为JavaScript，而不是HTML。@RayonDabre感谢它现在可以工作虽然这是一个有效点，但我觉得答案似乎不完整<代码>我想标签正在扼杀脚本。。