Import functions from another js file. Javascript
The following works for me in Firefox and Chrome. In Firefox it even works from file:///
models/course.js
export function Course() { this.id = ''; this.name = '';};models/student.js
import { Course } from './course.js';export function Student() { this.firstName = ''; this.lastName = ''; this.course = new Course();};index.html
<div id="myDiv"></div><script type="module"> import { Student } from './models/student.js'; window.onload = function () { var x = new Student(); x.course.id = 1; document.getElementById('myDiv').innerHTML = x.course.id; }</script>
You can try as follows:
//------ js/functions.js ------export function square(x) { return x * x;}export function diag(x, y) { return sqrt(square(x) + square(y));}//------ js/main.js ------import { square, diag } from './functions.js';console.log(square(11)); // 121console.log(diag(4, 3)); // 5You can also import completely:
//------ js/main.js ------import * as lib from './functions.js';console.log(lib.square(11)); // 121console.log(lib.diag(4, 3)); // 5Normally we use ./fileName.js for importing own js file/module and fileName.js is used for importing package/library module
When you will include the main.js file to your webpage you must set the type="module" attribute as follows:
<script type="module" src="js/main.js"></script>For more details please check ES6 modules
By default, scripts can't handle imports like that directly. You're probably getting another error about not being able to get Course or not doing the import.
If you add type="module" to your <script> tag, and change the import to ./course.js (because browsers won't auto-append the .js portion), then the browser will pull down course for you and it'll probably work.
import './course.js';function Student() { this.firstName = ''; this.lastName = ''; this.course = new Course();}<html> <head> <script src="./models/student.js" type="module"></script> </head> <body> <div id="myDiv"> </div> <script> window.onload= function() { var x = new Student(); x.course.id = 1; document.getElementById('myDiv').innerHTML = x.course.id; } </script> </body></html>If you're serving files over file://, it likely won't work. Some IDEs have a way to run a quick sever.
You can also write a quick express server to serve your files (install Node if you don't have it):
//package.json{ "scripts": { "start": "node server" }, "dependencies": { "express": "latest" }}// server/index.jsconst express = require('express');const app = express();app.use('/', express.static('PATH_TO_YOUR_FILES_HERE');app.listen(8000);With those two files, run npm install, then npm start and you'll have a server running over http://localhost:8000 which should point to your files.