admin管理员组

文章数量:1415467

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

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

  • javascript
  • html
Share Improve this question edited May 19, 2022 at 2:54 Jack Hasselbring asked May 19, 2022 at 2:20 Jack HasselbringJack Hasselbring 1071 silver badge5 bronze badges 1
  • 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 Commented May 19, 2022 at 3:51
Add a ment  | 

5 Answers 5

Reset to default 3

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

Helpful Link:
https://developer.mozilla/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 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

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

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>

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

Try it:

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

本文标签： HTML file can39t find external javascript functionStack Overflow

版权声明：本文标题：HTML file can&#39;t find external javascript function - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745177611a2646316.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。