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
– ThisIsNoZaku, Commented Aug 28, 2019 at 19:50
Your select.js script tag is missing the type="module". You can only import and export in module scripts. — Jared Smith
– Jared Smith, Commented Aug 28, 2019 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
– gyanendra, Commented Aug 28, 2019 at 20:00
See also Accessing exported functions from html file and ES6 Modules: Undefined onclick function after import or Use functions defined in ES6 module directly in html — Bergi
– Bergi, Commented May 26, 2021 at 18:29

Quentin · Accepted Answer · 2019-08-28 19:58:16Z

1

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.

answered Aug 28, 2019 at 19:58

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

RedFox · Accepted Answer · 2019-08-28 19:52:13Z

1

Try this:

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

answered Aug 28, 2019 at 19:52

RedFox

1917 bronze badges

Comments

Abhisar Tripathi · Accepted Answer · 2019-08-28 19:55:09Z

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, 2019 at 19:55

answered Aug 28, 2019 at 19:51

Abhisar Tripathi

1,6612 gold badges13 silver badges21 bronze badges

1 Comment

Jared Smith Over a year ago

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".

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related