How to call external JavaScript function in HTML

Question

I have a small chunk of code I can't seem to get working. I am building a website and using JavaScript for the first time. I have my JavaScript code in an external file 'Marq_Msg.js' which looks like this:

var Messages = new Array(); Messages[0] = "This is message 1"; Messages[1] = "This is message 2"; Messages[2] = "This is message 3"; Messages[3] = "This is message 4";    function scroll_messages() {   for (var i = 0; i < Messages.length; i++)         document.write(Message[i]);  } 

and in my HTML file 'Index.html' I am trying to call it like this:

    <div id="logo">         <marquee scrollamount="5" direction="left" loop="true" height="100%" width="100%">         <strong><font color="white"><script src="Marq_Msg.js">scroll_messages()</script></font></strong>         </marquee>     </div> 

The 'logo' div is a CSS piece that I'm trying to marquee inside of. If I put the code embedded inside the 'head' tag and call it, it works perfectly! There are a few other things id like to do with this code (like space the messages out a little) but I can't get the code to work in the first place. I've also tried adding:

<script src="Marq_Msg.js"></script> 

in the 'head' tag with a separate call, that was a no go. I also tried instead using:

<script type="text/javascript" src="Marq_Msg.js">scroll_messages()</script> 

Hell, i even had the function try returning a string (even hardcoded a simple "hello" to be returned) but that didnt work either with and without the 'type':

//Marq_Msg.js function scroll_messages() {    return "hello"; }  //index.html <script type="text/javascript" src="Marq_Msg.js">document.write(scroll_messages())</script> 

What am I missing? Any help would be greatly appreciated!! I've looked all over Google, and every site I find wants to do it using some 'form'. I just want messages to be displayed across, no form attached.

Answer 1

If a <script> has a src then the text content of the element will be not be executed as JS (although it will appear in the DOM).

You need to use multiple script elements.

1. a <script> to load the external script

2. a <script> to hold your inline code (with the call to the function in the external script)

   scroll_messages();