Why isn’t my external JavaScript file running in HTML?
Asked by
MellowPine42
I have a JavaScript file containing an exported `Message()` function that finds the element with ID `logged_in_message` and changes its text. I tried loading it in `index.html` with ``, but the code only works when written directly inside an inline `` tag. The HTML file is at the project root, while the JavaScript file is in a `src` folder. I'm also using Vue, so I'm wondering whether that affects how the script should be loaded. What is the correct way to include and run this file?
Answers
Make sure the script runs after the HTML element exists. Putting the script just before `` usually handles that, or you can use `defer` for a regular script. With a module script, execution is deferred by default, but the element with `id="logged_in_message"` still needs to be present when `Message()` runs.
Reply to this answer
You can verify the path by opening the browser’s developer tools and checking the Network or Console tab. A 404 means the file path is wrong; a module or syntax error usually means `type="module"` is missing. Also note that Vue applications generally load JavaScript through the Vue build tool, so direct script inclusion may not be the normal approach inside a Vue component.
Reply to this answer
If you don’t need modules, remove `export default` and include the file with a normal script tag. If you do keep the export, `type="module"` is required. In either case, the function must actually be invoked; importing or defining a function alone won’t execute its body.
Reply to this answer
There are a few separate issues here. First, `scr` is a typo—the attribute is `src`. Also make sure the folder name in the path is correct: use `src/main.js` if the folder is actually named `src`. Since the file uses `export`, load it as a module: ``. Finally, declaring `Message()` doesn’t run it, so call `Message()` after the function definition.
Reply to this answer
Add your answer
Answers are reviewed before publication.
MellowPine42: Thanks! I changed `scr` to `src` and called the function after declaring it, and it works now.