0
248
ViewsHTML 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
3 answers
Answer question0
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
0
<script src="test2.js"></script>
0
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>