CODEWITHSUNDEEP
javascripthtml
Jack Hasselbring
Jack Hasselbring

Reputation: 97

HTML file can't find external javascript function

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

Upvotes: 2

Views: 1006

Answers (5)

Raeesh Alam
Raeesh Alam

Reputation: 3490

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

Upvotes: 3

Gerard Haw
Gerard Haw

Reputation: 107

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>

Upvotes: 2

Petr Terry
Petr Terry

Reputation: 31

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

Upvotes: 2

Dang Cao
Dang Cao

Reputation: 343

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

Try it:

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

Upvotes: 1

A. Johan
A. Johan

Reputation: 426

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

enter image description here

Upvotes: 2

Related Questions