Внешний файл JavaScript загружается, но не выполняется - PullRequest
0 голосов
/ 29 мая 2020

Я пытаюсь поместить сценарий, который я успешно проверил, во внешний файл. Сценарий работал нормально, когда у меня он был внутри пары тегов сценария html на самой странице, но когда я пытаюсь вызвать сценарий извне, функция внутри него не выполняется, и консоль не регистрирует различные console.log этапы сценария:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(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>

Я сам пробовал отлаживать его с помощью python http.server, который указывает bootLoader. js найден и загружен:

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 -

Но когда я нажимаю кнопку с правильным ID, ничего не происходит. Если у меня есть более важная информация, которую я могу предоставить, чтобы облегчить поиск причины этой проблемы, сообщите мне?

(Примечание о структуре каталогов: HTML выше хранится в / root / en /books.html, а JS находится в /root/assets/js/bookLoader.js, поэтому sr c перепрыгивает на уровень каталога, чтобы найти файл.)

1 Ответ

0 голосов
/ 29 мая 2020

Вы должны поместить свои скрипты в конец вашего html файла перед закрывающим тегом тела.

<body>

  <!-- Your HTML here -->

  <script type="javascript" src="../assets/js/bookLoader.js"></script>
  <script type="javascript" src="../assets/js/main.js"></script>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...