Call function defined in body from head

Question

I have this simple HTML page:

<html>
    <head>
       <script>
       share();
       </script>
    </head>
    <body>
       <script>
          function share() {
                alert('test');
          }
       </script>
   </body>
</html>

I need to call the function share from the <head> and the function itself must be defined in the <body>.

The above code leads to undefined function error.

This is just a simplified script to explain the issue so it needs to be done that way. Is there a way around this?

It simply won't work since the function share hasn't been initialized yet. You can only call functions in javascript after it is declared. Javascript can't compile it self so that is why. — andrex, Sep 19 '14 at 22:32

score 2 · Answer 1 · answered Sep 19 '14 at 20:36

2

You need to wait for the body to be loaded, so

<html>
<head>
   <script>
   window.onload=share;
   </script>
</head>
<body>
   <script>
      function share() {
            alert('test');
      }
   </script>

answered Sep 19 '14 at 20:36

BReal14

1,603
1
12
35

score 0 · Answer 2 · answered Sep 19 '14 at 20:39

0

Use

     <html>
        <head>
<script src="jquery-1.11.1.min.js"></script>
           <script>
            $(document).ready(function() {
               share();
            });
           </script>

        </head>
        <body>
           <script>
              function share() {
                    alert('test');
              }
           </script>

answered Sep 19 '14 at 20:39

Pratik

1,122
8
26

Assuming you have jquery loaded which you don't have in that sample – pln Sep 19 '14 at 20:41
Sorry about that. Added it – Pratik Sep 19 '14 at 20:43

score 0 · Answer 3 · edited May 23 '17 at 12:29

You can use

    <html>
    <head>
       <script>
        windows.onload = function(){
           share();
        }
       </script>
    </head>
    <body>
       <script>
          function share() {
                alert('test');
          }
       </script>
</body>
</html>

or you can use Jquery version

  <html>
        <head>
         <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
           <script>
            $(document).ready(function() {
               share();
            });
           </script>
        </head>
        <body>
           <script>
              function share() {
                    alert('test');
              }
           </script>
    </body>
    </html>

Both of them work in this condition however if you want to know the difference between this tow I suggest to see this
window.onload vs $(document).ready()

Call function defined in body from head

3 Answers3