HTML file can't find external javascript function

Question

I have a basic html file as such:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module" src="test2.js"></script>
    
    <p>
    <button onclick="myMove()">Click Me</button>
    </p>

    <div id ='myContainer'>
    <div id ='myAnimation'></div>
    </div>
    
</body>
</html>

The file references an external javascript file, named "test2.js", and attempts to use a function called "myMove()" within the button click.

The javascript file and its function, "myMove()" are here as follows:

import './style.css'


function myMove(){
    var elem = document.getElementById('myAnimation');
    var pos = 0;
    clearInterval(id);
    id = setInterval(frame,10);
    function frame() {
      if (pos == 350){
        clearInterval(id);
      } else {
        pos++;
        elem.style.top = pos +'px';
        elem.style.left = pos + 'px';
      }
    }
  }

When embedding the function directly into the html file, it works just fine. But when trying to call it externally as seen above, the browser console reports the error:

test2.html:20 Uncaught ReferenceError: myMove is not defined
    at HTMLButtonElement.onclick (test2.html:20:32)

Why is the html file not finding the javascript function, and what can I do to fix this?

Additional Clarification: The network tab is showing that there's no error in loading the file. Additionally when I remove the "import '/style.css'" from the javascript it affects the display of the page, which indicates that it is being accessed.

Thanks

You might want to give this MDN doc a read about module syntax. The module import doesn’t make the imported script available in global scope. — Bumhan Yu
– Bumhan Yu, Commented May 19, 2022 at 3:51

Raeesh Alam · Accepted Answer · 2022-05-25 07:33:32Z

You need to define your function as window.myMove = myMove for global scope.
I hope this will help.

Helpful Link:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#other_differences_between_modules_and_standard_scripts

index.html File

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Module</title>
</head>
<body>

    <script type="module" src="./test2.js"></script>

    <p>
        <button type="button" onclick="myMove()">Click Me</button>
    </p>

    <div id='myContainer'>
        <div id='myAnimation'></div>
    </div>

</body>
</html>

test2.js File

var id = 0;
function myMove() {
    alert(1)
    var elem = document.getElementById('myAnimation');
    var pos = 0;
    clearInterval(id);
    id = setInterval(frame, 10);
    function frame() {
        if (pos == 350) {
            clearInterval(id);
        } else {
            pos++;
            elem.style.top = pos + 'px';
            elem.style.left = pos + 'px';
        }
    }
}

window.myMove = myMove

A. Johan · Accepted Answer · 2022-05-19 02:32:26Z

2

A clarifying question, was the external javascript file loaded? you can check from your browser developer tools (usually Ctrl+Shift+i in Windows), under the network tab. Ensure that it's not showing a 404 or any other errors in loading test2.js

answered May 19, 2022 at 2:32

A. Johan

4263 silver badges6 bronze badges

1 Comment

Jack Hasselbring Over a year ago

The network tab is showing that there's no error in loading the file. Additionally when I remove the "import '/style.css'" from the javascript it affects the display of the page.

Petr Terry · Accepted Answer · 2022-05-25 03:07:41Z

2

<script src="test2.js"></script>

answered May 25, 2022 at 3:07

Petr Terry

312 bronze badges

Comments

Gerard Haw · Accepted Answer · 2022-05-25 05:47:58Z

2

Not sure why you import css from javascript.

For css import

<head>
<link rel="stylesheet" href="style.css">
</head>

Then change your script to

<script src="test2.js"></script>

answered May 25, 2022 at 5:47

Gerard Haw

1077 bronze badges

Comments

Dang Cao · Accepted Answer · 2022-05-19 03:42:33Z

1

In a module context, variables don't automatically get declared globally.

Try it:

<script src="test2.js"></script>

answered May 19, 2022 at 3:42

Dang Cao

3432 gold badges5 silver badges13 bronze badges

1 Comment

Jack Hasselbring Over a year ago

This only removes the css elements from appearing on the page

Collectives™ on Stack Overflow

HTML file can't find external javascript function

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related