Не работает код в JavaScript файле

У меня такая проблема - когда я пишу данный кусочек кода в своём js файле, он не работает. Но работает в теге

<script>

`Вот этот js код`
var counter = 0; // Переменная counter, значение 0
    $("#number").html(counter); //Строка кода для вывода числа
    function count(){ //Функция подсчёта
    counter = counter + 1; //Строка кода, добавляющая 1 цифру в переменной counter
    $("#number").html(counter); // Вывод полученного числа
    };
<script> `Вот код, не рабочий в JS файле. Но тут он работает, в теге script`
    var counter = 0; // Переменная counter, значение 0
    $("#number").html(counter); //Строка кода для вывода числа
    function count(){ //Функция подсчёта
    counter = counter + 1; //Строка кода, добавляющая 1 цифру в переменной counter
    $("#number").html(counter); // Вывод полученного числа
};
</script>

Этот js код работает в моём html файле, а в js файле нет. Почему - не знаю. Прошу помочь. Вот также скриншот экрана в VSCode - введите сюда описание изображения А вот вывод кода в браузере - введите сюда описание изображения

P.s - И я использую JQuerry -

<script src="http://code.jquerry.com/jquerry-1.1.13.js> </script>

Вот код html файла -

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sormio - tests</title>
     <link rel="stylesheet" href="main.css">
     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
     <script src="script.js"></script>
</head>
<body>
    <h1 id="number" onclick="count();">
    </h1>
    <p>Это какой-то текст.</p>
</body>
<script>
    var counter = 0; // Переменная counter, значение 0
    $("#number").html(counter); //Строка кода для вывода числа
    function count(){ //Функция подсчёта
    counter = counter + 1; //Строка кода, добавляющая 1 цифру в переменной counter
    $("#number").html(counter); // Вывод полученного числа
    };
</script>
</html>

Фото с файлами - введите сюда описание изображения


Ответы (1 шт):

Автор решения: reznikovkg

Ваш JS-код в файле обрабатывается до того как интепритатору известно о содержании <body>

Вам необходимо либо дожидаться полной загрузки страницы через document.load читать тут

Ваш js файл

window.onload = function() {
    // ...код из вашего файла
};

Либо прикрепить сам файл в конце страницы внутри тега <body>

Вот так:

<body>
    ...
    <script src="script.js"></script>
</body>
→ Ссылка