Форум

Иса Мирзоев · #1 (**permalink**) 24.05.2019, 21:50

Приветствую. Периодически помогаете, за что хотел бы поблагодарить) Один из давних вопросов - если пишу 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-документе, но понимаю, что это путь в тупик и надо понять, что я делаю не так в подключенных файлах...

Иса Мирзоев · #2 (**permalink**) 24.05.2019, 21:59

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

Malleys · #3 (**permalink**) 24.05.2019, 22:15

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

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

Иса Мирзоев · #4 (**permalink**) 24.05.2019, 22:41

Сообщение от Malleys

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

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

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

Иса Мирзоев · #5 (**permalink**) 31.05.2019, 00:53

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

Форум

Справочник

Discord чат

Курсы javascript