Javascript-форум - Странная проблема с подключенным js-файлом

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Странная проблема с подключенным js-файлом (https://javascript.ru/forum/misc/77597-strannaya-problema-s-podklyuchennym-js-fajjlom.html)

Странная проблема с подключенным js-файлом

Приветствую. Периодически помогаете, за что хотел бы поблагодарить) Один из давних вопросов - если пишу js код в html-документе самом, все прекрасно работает, а вот, если тот же самый код прописать в подключенном файле - часто определенная кода не работает, хотя файл подключен верно и "алерты" подключенный js-файл выводит, как надо. Собственно, пример. Можете проверить в html и js документах. Внимание, вопрос - если работаешь через подключенный js-файл, требуются дополнительные знаки? Иного объяснения я не вижу.

html-код (скриншот с папкой также предоставляю на всякий случай, если кто не верит, что подключил я файл верно - да и простые скрипты в js-файле работают прекрасно).

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <p class="text">Текст 1</p>
</body>
</html>

Джаваскрипт код, который работает в html - файле, но не пашет абсолютно в подключенном файле, где выводятся алерты

var text = document.querySelector(".text");
    text.onclick = function(){
        text.style.color = "yellow"
    }

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

Кажется, понял. Подключать надо внизу. Извините, за напряг, ребят...(

Ну или можно подключать, как у вас в HTML написано, только тогда нужно указать в script.js, что нужно сначала, чтобы весь DOM загрузился, и только потом искать .text

document.addEventListener("DOMContentLoaded", function() {
    var text = document.querySelector(".text");
    text.onclick = function(){
        text.style.color = "yellow"
    }
});

Цитата:

Сообщение от Malleys (Сообщение 508258)

document.addEventListener("DOMContentLoaded", function() {
    var text = document.querySelector(".text");
    text.onclick = function(){
        text.style.color = "yellow"
    }
});

Большое спасибо, учтем) Так рад, что решил проблему давнюю, теперь смогу писать спокойно свой код уже нормально, в отдельном файле))

Более легкий способ нашел. Просто в тэге скрипт рядом с подключением файла указать атрибут "async". Проверил, у меня работает асинхронная загрузка страницы и скрипта)