HTML file can't find external javascript function-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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

Try it:

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