'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

javascripthtmljavascriptjquery


Solution 1:[1]

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

Solution 2:[2]

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

Solution 3:[3]

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>

Solution 4:[4]

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

Solution 5:[5]

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

Try it:

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

Solution 6:[6]

Using $('#formIncidencia').find("[id='archivo']") will return an array of matches even if you only have 1 input field. So you would have to change it to $('#formIncidencia').find("[id='archivo']")[0].files[0].size;.

Solution 7:[7]

try the following:

$('#formIncidencia').find('change', function() {

  //this.files[0].size gets the size of your file.
  alert(this.files[0].size);

});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 A. Johan
Solution 2 Petr Terry
Solution 3 Gerard Haw
Solution 4 Raeesh Alam
Solution 5 Dang Cao
Solution 6 GeneTv
Solution 7

Related Questions