How to call one function defined in a javascript to another javascript file?

Question

I am trying to import one function declared in a javascript file into another javascript file, but can't get it right. I am not using any transpiler.

I am trying to import variables and functions from one JavaScript file to another but don't want to use Transpilers. I can't get it right how to import and export functions. I am using Adobe{Brackets} as my IDE.

I have already converted the importing script to a module, but still I am unable to export or import. As a second try, I tried converting exporting script to a module but still get the following error:

Parsing Error- Export and import keyword are reserved.

As a third try, I converted both files to a module. Still it does not work.

HTML:

<html>
<head><title>Test1</title>
</head>
<body>
<button type = "button" class= "slctbtn" onclick= "select()" id= "selct_btn">Select</button>
</body>
<script src="javascript/select.js"></script>
<script type="module" src="javascript/Test.js"></script>
</html>

javascript/Test.js:

var today = 28;
export {today};

javascript/select.js:

import {today} from "./javascript/Test.js";
function select(){
    var month = "august";
    var year = "2019";
    alert("this is " + month + " of the year " + year + " and today is " + today + " day.");
}

Expected Result: Alert must show text like this image

The from part of the import is relative to the location of the importing file. — ThisIsNoZaku, Aug 28 '19 at 19:50
Your `select.js` script tag is missing the `type="module"`. You can only import and export in module scripts. — Jared Smith, Aug 28 '19 at 19:53
I put all javascript.js files in a folder named as javascript thus location of it must be javascript/Test.js. But i tried {./Test } also as well as i tried converting both the files as modules. Still got Parsing error — gyanendra, Aug 28 '19 at 20:00
See also [Accessing exported functions from html file](https://stackoverflow.com/q/50176213/1048572) and [ES6 Modules: Undefined onclick function after import](https://stackoverflow.com/q/44590393/1048572) or [Use functions defined in ES6 module directly in html](https://stackoverflow.com/q/53630310/1048572) — Bergi, May 26 '21 at 18:29

score 1 · Answer 1 · answered Aug 28 '19 at 19:52

1

Try this:

import {today} from "./Test.js";

answered Aug 28 '19 at 19:52

RedFox

191
7

score 1 · Accepted Answer · answered Aug 28 '19 at 19:58

You can't really mix and match module and non-module JS. So:

Use only one <script> element
- Make it type="module"
- Load select.js with it
Use import {today} from "./Test.js"; because the path is relative to the JS
Since variables in modules are not global, use addEventListener inside select.js and not an onclick attribute.

Abhisar Tripathi · Answer 3 · 2019-08-28T19:55:09.840

0

Replace import {today} from "./javascript/Test.js";

with import {today} from "./Test";;

Here is working demo https://stackblitz.com/fork/react?file=index.js

edited Aug 28 '19 at 19:55

answered Aug 28 '19 at 19:51

Abhisar Tripathi

1,569
10
21

1

That will be necessary to get the code working, but it isn't the source of the error: trying to `import` in a regular js script is. Needs `type="module"`. – Jared Smith Aug 28 '19 at 19:55

How to call one function defined in a javascript to another javascript file?

3 Answers3

Linked