Почему не срабатывает JS в visual code?

Question

[xonar]

Здравствуйте. Есть рабочий код, но в VS Code + open live server он не срабатывает. Точнее не срабатывает вообще javascript

var login = document.querySelector(".login-link");
    var loginpopup = document.querySelector(".modal-login");
    
    login.addEventListener("click", function (event) {
        event.preventDefault();
        loginpopup.classList.add("modal-show");
    });

UPD. В codepen работает, а вот на локалке через синхронизацию браузера с VS code кидает на ссылку. Сталкивались с таким? Может в VS code нужно чтот включить?

UPD 2.0. Установил отладчик в VS code и он выдал такое.

var login = document.querySelector('.login-link');
^

ReferenceError: document is not defined
at Object. (h:\barbershop\modal.js:1:13)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

Но, повторюсь код рабочий. Можете глянуть тут рабочий вариант - https://codepen.io/ruslan-lysenko/pen/rEgqBe

Скоро уже психану и на notepad++ пересяду

Comments

[lloydbanks]

в jsfiddle покажите, что оно не работает

[xonar]

lloydbanks, А там действительно работает. Но, у меня на локалке через синхронизацию браузера с VS code кидает на ссылку. Сталкивались с таким? Может в VS code нужно чтот включить? Добавлю это к своему вопросу пожалуй.

[xonar]

toxic-toster, Вот, при клике на ВХОД открывается форма ввода логина и пароля, а так же оверлей сзади. На codepen всё хорошо, а вот через VS CODE live перекидывает на ссылку.

https://codepen.io/ruslan-lysenko/pen/rEgqBe

[Даниил Маслов]

xonar, может кэш или что-то в таком духе? сделайте Ctrl (или CMD) + Shift + R

[xonar]

toxic-toster, s0xzwasd, Очень странно. Попробовал всё уже, ничего не помогает. Может какие-то настройки в VS code нужно для js сделать? Я на vs code недавно сижу, может где-то галочку надо врубить. Потому что, он вообще не реагирует на js. Я уже даже другому элементу js навесил, простому блоку без ссылок и он не срабатывает.

[xonar]

toxic-toster, у меня синхронизация между редактором и браузером через open live server от vs code. Пишу код, сразу обновляется в браузере всё и я проверяю.

[xonar]

toxic-toster, Абсолютно так же ведёт себя. Пробовал и внутри html вставлять и в отдельном файле js подключать.

[xonar]

toxic-toster, Не помогло, так же кидает на ссылку и на странице Cannot GET /vk.com

а в консоли браузера если глянуть изначально это -

Uncaught TypeError: Cannot read property 'addEventListener' of null
at index.js:4
(anonymous) @ index.js:4

[xonar]

toxic-toster, Через alt + l alt+o

[xonar]

toxic-toster,

В расширениях у меня нет JS вроде. У вас есть?

Answer 1

[Александр]

Доброго дня!

Не видно, чтобы ваша html-страница ссылалась на js-файл:
<script src="path/to/script.js"></script>

Видимо, codepen делает это автоматически.

Comments

[xonar]

Так в codepen потому что js я поместил в js поле. Там и не должно js файл подключен.

[Александр]

Я не пользовался данным расширением для VS Code, но при беглом прочтении его описания мне кажется, что оно считает ваш набор файлов nodejs-сервером, соответственно, js файл воспринимается как самостоятельный серверный файл типа index.js
Вы можете открыть вашу страницу напрямую с диска и убедиться, что в источниках отсутствует ваш скрипт

[xonar]

Александр, Да, возможно так и есть. Потому что, node.js установлен. Ща попробую его снести.

[xonar]

Александр, Удалил не помогло. Мало того, с диска открыл главную страницу, но даже так js не отрабатывает, хотя путь указан верно и файл подгружается. Бред какой-то.

[Александр]

Node тут ни при чем.
Исполнять js на странице должен браузер. А чтобы он это делал, на странице нужна ссылка на файл со скриптом:



Иначе ваш скрипт просто не загружается в браузер и его как будто не существует.

Посмотрите так же, есть ли Сообщения в консоли браузера (f12 -> Console)

[xonar]

Александр, Так я его в Html прописываю и он даже подгружается. Но, никакой код не срабатывает. Не хочет и всё. Даже вывод просто alert не срабатывает.

[Александр]

xonar, попробуйте сделать минимальный рабочий вариант страницы, а потом добавлять в него свою реализацию по частям.

Минимальный вариант: html-страница со встроенным скриптом внутри

<body>
<script>alert(‘test’)</script>
</body>

Потом вынести этот скрипт в отдельный файл.
Потом дополнять его дальше.

Убедитесь, что JavaScript включён в настройках браузера.

[xonar]

Александр, Алерт ваш сработал. Добавил его в html, сработал. Затем добавил его в js файл отдельно и тоже сработало.

Вот сайт залил в на сервак, можете глянуть у вас отрабатывает код? И путь как раз можете посмотреть - сайт

[Александр]

xonar, Я бы навешивал обработчики событий после загрузки страницы, то есть, по наступлении события DOMContentLoaded:

document.addEventListener('DOMContentLoaded', ()=>{
  // навешиваем обработчики на нужные элементы.
});

Иначе скрипт срабатывает до того, как структура документа разобрана браузером.

[xonar]

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

Answer 2

[VegasChickiChicki]

Выключите то что производит синхронизацию файлов и обновление, а потом попробуйте сделать то что пытаетесь.

Comments

[xonar]

В данном случае всё работает. Вопрос свой обновил, проблема где-то в VS code, вот её теперь пытаюсь решить.

[VegasChickiChicki]

xonar, Вы проверяли, у вас JS файл подключен к проекту?

[xonar]

VegasChickiChicki, в каком плане? В vs code js не вшит по умолчанию? Буду безумно благодарен, если объясните, а то я уже почти сдался....( если вы имеете ввиду, подключён ли js в файле html, то само собой подключен

[VegasChickiChicki]

xonar, Я имел ввиду как раз html файл, а то мало ли... А так, если отойти от темы слегка, то отличный редактор когда для веба - phpstorm.