0

I have a createTable function in a .js file that, when existing by itself, I can successfully call from a button click that is defined in the html file. However, I need the table to be presented immediately after the page loads. I have tried all the various "load/onload" methods I can find, but nothing is getting me out of trouble:

<script src = "table_file5.js"></script>
<script>
  window.addEventListener("load", createTable, false);
</script>
ChrisJ
  • 1
  • 1

2 Answers2

0

The way I understand it, the code I provided above should work without any special considerations, i.e. the external file would already be fully read in and processed before the load command would be attempted. That said, the solution proposed by Klaycon does work. This implies that there is more that I don't understand yet.

A second question comes to mind here: why are these "load" functions even needed? When I limited my activities to inload code the subject never even came up.

ChrisJ
  • 1
  • 1
  • The `load` event is for executing code after all external resources have been fully loaded in and processed (css, js, etc). How is your `createTable` defined in the `table_file5.js`? That information would help us provide an exact answer – Klaycon Dec 13 '19 at 14:25
  • Please use the answer box only for answers to the question, not for further questions or comments about an answer. Ask a new question if you have another question. – Heretic Monkey Dec 13 '19 at 18:50
-2

Your scripts are probably loading out of order or your createTable definition is somehow deferred, so at the time you define the listener for load, createTable is still undefined. The easiest way to fix the former to simply ensure that the script containing createTable is encountered before adding the event listener, see this question for more information.

If your createTable definition is happening later for some reason, or just as an alternative, as long as you're sure it'll be defined when the listener runs then you can wrap it in an anonymous function to avoid this unnecessary load-order dependency:

window.addEventListener("load", () => createTable(), false);
window.createTable = () => console.log("hi");

Compare this to something of a similar fashion to your current code, where createTable is likely being defined later:

window.addEventListener("load", createTable, false);
window.createTable = () => console.log("bye");
Klaycon
  • 10,599
  • 18
  • 35
  • Why wouldn't `createTable` be defined? – Heretic Monkey Dec 12 '19 at 23:00
  • @HereticMonkey I draw this conclusion from this part of the question: `I have a createTable function in a .js file that, when existing by itself, I can successfully call from a button click that is defined in the html file` - without knowing more about the HTML, I think this is the easiest answer. – Klaycon Dec 12 '19 at 23:08
  • @ScottMarcus That isn't true: When running the code in the question, you call `addEventListener` with three arguments: `"load"`, `createTable`, `false`. If `createTable` hasn't been defined yet, you encounter a `createTable is not defined` error, because it's being referenced immediately. That's why you need to wrap it in order to defer referencing it. – Klaycon Dec 12 '19 at 23:13
  • So... you're guessing that the problem is that the `addEventListener` call comes before the script file in document order. – Heretic Monkey Dec 12 '19 at 23:19
  • @HereticMonkey Correct, based on the fact that using a button click listener instead of a window load listener apparently fixes the problem. Regardless it is true that if the `addEventListener` call comes before the script file it **would throw an error** and therefore it's reasonable to not create load-order dependencies by wrapping the function call. – Klaycon Dec 12 '19 at 23:21