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 <li> tag. Are you sure you're not actually intending to run it from within the <head> section (where an <li> would be invalid markup)? You also cannot load an external script and run inline JavaScript within the same <script> tag. Is your ClassMenu function in your JavaScript InProg.js file? — Obsidian Age
– Obsidian Age, Commented Jul 25, 2017 at 22:41
code inside <script> tags with src= tags doesn't run, the tag is just a placeholder for the link — dandavis
– dandavis, Commented Jul 25, 2017 at 22:46
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 <script> tag." — A. Day
– A. Day, Commented Jul 25, 2017 at 22:49

andrewhiles · Accepted Answer · 2017-07-25 22:56:25Z

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, 2017 at 22:56

andrewhiles

996 bronze badges

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

4 Comments

Jesse Webb Over a year ago

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, or with pure javascript. This ensures that your JS code doesn't raise errors if it is trying to find elements in the DOM.

andrewhiles Over a year ago

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.

A. Day Over a year ago

So it is recommended that I attach the programs to jQuery and use it instead?

A. Day Over a year ago

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. <li><script>ClassMenu(console.log(ClassList.toString));</script></li>

Collectives™ on Stack Overflow

How to call a JavaScript function in HTML on load

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related