How to separate HTML button and javascript logic into different files

Question

I need to like to split button in HTML file and it's click javascript function into javascript file.

Here is what I have tried so far:

Trial 1: Combine HTML submitbutton button and button's click function

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

Trial 2: Separate HTML sumitbutton button in HTML file and its click function into js file.

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

advertisementlandedvalidationatclient.js file

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

   }
</script>

Trial 1 works ( I see alert) and Trial 2 does not work (I don't see alert). What could be wrong?

@Amit yes <script> is removed and it works. Why? I thought <script> is necessary for a separate js file. — batuman
– batuman, Commented Jan 2, 2016 at 12:58
<script> is an HTML tag/element/entity, it "doesn't exist" in JavaScript. When you load an external JavaScript fire into an HTML document with a <script> element, the content is parsed as JavaScript, not HTML. — Amit
– Amit, Commented Jan 2, 2016 at 13:03

Christos · Accepted Answer · 2016-01-02 15:52:02Z

3

Trial 1 works ( I see alert) and Trial 2 does not work (I don't see alert). What could be wrong?

In the first trial the script is at the bottom of your html. So when the html would be rendered then the script would be parsed and the corresponding event handler would be bind. This is ok, because there is a button with the specified id.

On the other hand, in the second trial, you have load the script in the head tag of your html. At this moment the js is parsed and there isn't any button to bind this event. Furthermore, there isn't any need of using <script> tag in an external js file. We use this tag, when we write scripts in our html file. The following is more than ok.

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

If you try this, then the problem would be solved:

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

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

Now when you document is ready, in other words when you html would be rendered by the browser, you will bind the corresponding event handlers.

By the way, it is a better practice to load your scripts at the bottom of your html page. This is a good practice according to Progressive enhancement.

edited Jan 2, 2016 at 15:52

answered Jan 2, 2016 at 12:40

Christos

54.1k9 gold badges82 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rayon Over a year ago

Though it is a valid point, answer seems incomplete to me. <script> tags are killing the script I suppose..

Collectives™ on Stack Overflow

How to separate HTML button and javascript logic into different files

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related