title: Call function in .js file from html?
body: <p>Is it possible to call a function declared in a <code>.js</code> file from the body of the HTML. I'm assuming the reason it won't work is because the <code>.js</code> file is called after the function has been called in the HTML body. Is there a way around this.</p>
  
  <p>I've had a look at some answers here, but can't seem to find what I'm looking for. My apologies if it's staring at me as a beginner I may not be using the correct terminology. </p>
  
  <pre><code>jqueryfunctions.js:
  
  function someFunction() {
      // do.something;
  }
  
  
  
  index.html:
  
  &lt;html&gt;
      &lt;head&gt;
       &lt;script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"&gt;&lt;/script&gt;
      &lt;script src="jqueryfunctions.js"&gt;&lt;/script&gt;  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script&gt;
              someFunction();
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>Here is the full/actual .js file <code>returnedMessage()</code> is the function I was reffering to as <code>someFunction()</code>.</p>
  
  <p>The console error I'm getting is "<code>returnedMessage()</code> is not defined". </p>
  
  <pre><code>$(function(){
      var timer = null;
      function appendmessageBox() {
          $('body').append('&lt;div id="messageBox" class="datamessagebox"&gt; &lt;/div&gt; ');
      }
      // just before body tag.
      appendmessageBox(); 
  
      // makes MessageBox Disappear on MouseOver
      $('#messageBox').on('mouseover click', function(){
          $(this).fadeOut(300);
      });
  
      function returnedMessage(message) {
          if (timer) {
              clearTimeout(timer); //cancel the previous timer.
              timer = null;
          }
          $( '#messageBox' ).css('display', 'inline-block');
          timer = setTimeout(function(){ 
              $( '#messageBox' ).fadeOut( 499 );
          }, 5000);
          $( '#messageBox' ).append('&lt;msg&gt;'+message+'&lt;br /&gt;&lt;/msg&gt;').fadeIn( 200 );
          $( '#messageBox &gt; msg:last-of-type' ).delay(3000).fadeOut( 3000 );
          setTimeout(function(){ 
              $( '#messageBox &gt; msg:first-of-type' ).remove();
          }, 5999);
      }
  
              // This test message bellow works correctly.
              returnedMessage('hello world - test 1'); 
  
  
  });
  </code></pre>