How to call a JavaScript function in HTML on load

Question

JavaScript code I am trying to get to call from the HTML.

var ClassList = new Array ["Bio1300","csci12"];

function ClassMenu(ClassList) {
  return (ClassList.toString);
};

This is the HTML code I am trying to call the JavaScript function inside of on the load of the page.

<li>
  <script type="text/javascript" src="JavaScript InProg.js">
    function ClassMenu() {
      console.log(ClassList.toString);
    }
  </script>
</li>

Please help. I have many other functions I am trying to call in this manner that are both arrays and contain mathematical calculations.

You appear to be attempting to execute your second JavaScript code from within an `
It was my understanding that you could put a script tag anywhere in the HTML and that it was supposed to be put where you wanted the script from JS to run. Yes, my ClassMenu function is in the JavaScript InProg.js file. I'm not sure I understand what you mean by "You also cannot load an external script and run inline JavaScript within the same — A. Day, Jul 25 '17 at 22:49

score 1 · Answer 1 · answered Jul 25 '17 at 22:56

1

There are a few issues with the code snippet you've provided. Firstly, it's considered a best practice to add your <script> tags inside the <head> of the document or at the end of the document when loading JavaScript files. Secondly, your source reference is incorrect. Assuming the JavaScript file InProg.js is at the same directory level as your HTML file, you could change your script link to something like this:

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

Once you've ammended how you're loading the JavaScript file into your page, you can simply make a call to the function inside another <script> tag from anywhere on the page, like so:

<script>ClassMenu(params);</script>

Also, I'd recommend adding the console.log statement to the function you're calling.

Hopefully this helps.

answered Jul 25 '17 at 22:56

andrewhiles

99
6

This answer should certainly help out the OP but I would also recommend mentioning that most developers want Javascript to run only once the DOM is finished loading. This can be done easily with [jQuery's `ready()` function](https://api.jquery.com/ready/), or [with pure javascript](https://stackoverflow.com/a/9899701/346561). This ensures that your JS code doesn't raise errors if it is trying to find elements in the DOM. – Jesse Webb Jul 25 '17 at 23:03
Yes, this is very true. In terms of the implementation, it really depends on the OP's design. If they're using jQuery then `$( document ).ready()` would ensure that code is only executed once the DOM has fully loaded. If they're going with a pure JavaScript approach, it can get a little more complicated by adding event listeners, etc, but this is something that the OP should consider. Thanks. – andrewhiles Jul 25 '17 at 23:13
So it is recommended that I attach the programs to jQuery and use it instead? – A. Day Jul 25 '17 at 23:20
Also I tried to set the code like you suggested and it still didn't work. Maybe I am doing it wrong? I attached the JS file in the head of the HTML file with the script tags.

A. Day

Jul 25 '17 at 23:24

How to call a JavaScript function in HTML on load

1 Answers1