External JavaScript file will load, but not execute
Question
I'm trying to put a script I had tested succesfully inline in an external file. The script worked fine when I had it inside a pair of html script-tags on the page itself, but when I try to call the script externally the function inside it does not execute and the console does not log the various console.log stages in the script:
$(document).ready(function() {
console.log("Script loaded!");
$("#btn-april-en").click(function() {
console.log("Confirm click!");
$.getJSON("books.json", function(data, status) {
console.log(data);
console.log(status);
$("#img-container").html("<img src=" + data.aprilWitchEn.coverIMG + ">");
$("#title-en").html("h3>Title: ") + data.aprilWitchEn.title + "</h3>"
});
});
});
<head>
<title>Title here</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- jQuery, Bootstrap etc-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- My CSS -->
<link rel="stylesheet" href="../assets/css/styles.css">
<!-- My JavaScript -->
<!-- Scripts do not load correctly right now -->
<script type="javascript" src="../assets/js/bookLoader.js"></script>
<script type="javascript" src="../assets/js/main.js"></script>
</head>
I have tried to debug it myself with the python http.server, which indicates bootLoader.js is found and loaded:
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
::1 - - [29/May/2020 08:22:20] "GET / HTTP/1.1" 304 -
::1 - - [29/May/2020 08:22:20] "GET /assets/js/main.js HTTP/1.1" 304 -
::1 - - [29/May/2020 08:22:20] "GET /assets/css/styles.css HTTP/1.1" 304 -
::1 - - [29/May/2020 08:22:20] code 404, message File not found
::1 - - [29/May/2020 08:22:20] "GET /favicon.ico HTTP/1.1" 404 -
::1 - - [29/May/2020 08:22:26] "GET /en/start.html HTTP/1.1" 304 -
::1 - - [29/May/2020 08:22:32] "GET /en/books.html HTTP/1.1" 200 -
::1 - - [29/May/2020 08:22:32] "GET /assets/js/bookLoader.js HTTP/1.1" 200 -
But when I press the button with the correct ID, nothing happens. If there is any more relevant information I can provide to make finding the cause of this problem easier, please let me know?
(A note on directory structure: the HTML above is stored in /root/en/books.html and the JS is in /root/assets/js/bookLoader.js, so the src jumps up a directory level to find the file.)
1 answers
solution1
0 2020-05-29 07:06:31
You should put your scripts at the end of your html file, before the closing body tag.
<body>
<!-- Your HTML here -->
<script type="javascript" src="../assets/js/bookLoader.js"></script>
<script type="javascript" src="../assets/js/main.js"></script>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.