У меня по какой-то причине не работает javascript код. Мне нужно, чтобы при выборе определённого селекта, текст в блоке div изменялся. Код, я думаю написан правильно, но почему-то в консоле вылезает ошибка:
Header.html:170 Uncaught TypeError: Cannot set property ‘innerHTML’ of null at HTMLSelectElement.
Всё пишу в одном файле, то есть ничего не подключаю.
https://test-proekt.ru/ На сайте не работает почему-то скрипт слайдера + никакой JS-код не срабатывает из файла common.js (например появление всплывающего окна с кнопки в шапке).
Кто-нибудь может подсказать в чем проблема?
Вопрос задан более трёх лет назад
17688 просмотров
2 комментария
Оценить 2 комментария
В консоль пробовали смотреть?
Mixed Content: The page at ‘https://test-proekt.ru/’ was loaded over HTTPS, but requested an insecure script ‘code.jquery.com/jquery-1.10.2.js’. This request has been blocked; the content must be served over HTTPS.
Решения вопроса 1
Егор Живагин @Krasnodar_etc
avito front
Консоль-то откройте
The page at 'https://test-proekt.ru/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-1.10.2.js'. This request has been blocked; the content must be served over HTTPS.
В подключении jQuery попробуйте http на https заменить
Ответ написан более трёх лет назад
Нравится 3 1 комментарий
Павел Корнилов @KorniloFF Куратор тега JavaScript
Проще так: «//code.jquery.com/jquery-1.10.2.js» Ответы на вопрос 4
Junior PHP
На мой взгляд тут 2 причины: 1. Из-за того, что вы используете https. скрипты, подключенные через протокол http не загружаются, вот и из-за этого не работает код. 2. Возможно какой-то файл для работы js кода не подключён, либо его вообще нет. Мне больше кажется что 2-ой вариант.
Не работает js [Решено] — Joomla 3.x: Общие вопросы
Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.
В Joomla Extensions Directory появился тег совместимости с Joomla 5.
Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��
JoomlaDay Spain, Madrid.
В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.
Почему не работает js код в html
Вставляет код JavaScript на страницу или подключает внешние файлы скриптов.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Кратко
Пример
Как понять
Как пишется
Атрибуты
Подсказки
Ещё примеры
На практике
Алёна Батицкая советует
Почему принято размещать со стилями внутри , а перед закрывающим тегом
? Когда можно нарушить это правило?
Объясните разницу между , и .
Контрибьюторы:
Алёна Батицкая ,
Светлана Коробцева
Обновлено 8 сентября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Скрипт — это элемент кода, который позволяет совершать действия, включать анимацию и создавать другие эффекты на странице. Чтобы добавить скрипты, используй тег .
Как и CSS-стили, скрипты можно прописать внутри кода страницы, либо добавить как внешний документ по ссылке.
Теги можно располагать в любом месте в заголовке . . . < / head> или теле . . . < / body> HTML-документа. Но лучше всего добавлять их в самый конец перед закрывающим тегом < / body>.
Пример
Скопировать ссылку «Пример» Скопировано
В этом примере мы подключим скрипты из внешнего файла с расширением .js . Лучше делать именно так, вместо того, чтобы прописывать код скрипта в структуре страницы. Атрибут src указывает путь к файлу.
scriptsrc="external.js">script>
Как понять
Скопировать ссылку «Как понять» Скопировано
HTML — создаёт структуру веб-страницы, CSS-стили — её внешний вид, а скрипты — определяют поведение страницы. С помощью скриптов можно «оживить» страницу, добавить анимацию и другие эффекты.
Скрипты пишут на разных языках, самый популярный из которых — JavaScript.
Лучше добавлять скрипты из внешнего файла. Это поможет быстро добавлять одинаковые функции на разные страницы или сайты, а также редактировать и контролировать всё в одном месте. Пользователю это поможет ускорить загрузку страницы, так как файл со скриптами сохранится на компьютере при первой загрузке.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Тег — парный, его всегда нужно закрывать с помощью < / script>. Если ты подключаешь внешние скрипты по ссылке, то внутри тега ничего писать не надо. Но закрыть тег всё равно придётся.
Если добавить скрипты в код, то выглядеть это будет так:
window.alert("Добавили вот какой-то JavaScript-код")script>window.alert("Добавили вот какой-то JavaScript-код")script>
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
async — браузер запускает скрипт асинхронно, то есть не дожидаясь загрузки веб-страницы. Впрочем, и сама страница не будет ждать запуска скрипта и продолжит загружаться, как обычно. Если async не указать, то скрипты будут грузиться по очереди. Этот атрибут работает только когда скрипт задаётся внешним файлом.
defer — откладывает запуск скрипта, пока веб-страница не загрузится целиком.
src — указывает путь к файлу со скриптами. Это может быть полный URL-адрес файла или относительный адрес, например, src = » / scripts / browser . js» . Файл должен иметь расширение .js . Когда указываешь src , не пиши ничего внутри . . . < / script>.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Обычно скрипты, которые должны выполняться первыми, помещают в заголовок страницы.
Ещё примеры
Скопировать ссылку «Ещё примеры» Скопировано
Попробуем с помощью скрипта сделать так, чтобы текст увеличивался и уменьшался через каждую пару секунд:
Подключение скриптов
Подключение скриптов
Скрипты можно подключить разными способами. Например, описать их прямовнутри HTML-страницы. Но лучше всё же в отдельном файле.const p = document.getElementById("blinking")setInterval(function () if (p.style.fontSize !== "10px") p.style.fontSize = "10px"> else p.style.fontSize = "20px">>, 2000)DOCTYPEhtml>html>head>metacharset="utf-8">title>Подключение скриптовtitle>linkrel="stylesheet"href="style.css">head>body>h1>Подключение скриптовh1>pid="blinking"> Скрипты можно подключить разными способами. Например, описать их прямо внутри HTML-страницы. Но лучше всё же в отдельном файле. p>script>const p =document.getElementById("blinking")setInterval(function()if(p.style.fontSize!=="10px") p.style.fontSize="10px">else p.style.fontSize="20px">>,2000)script>body>html>
�� Почему нужно писать в конце разметки, перед < / body>?
При загрузке страницы браузер читает код сверху вниз. В момент, когда он доходит до тега он останавливается и сперва читает что там, в этом теге . В этот момент вся остальная страница простаивает и не загружается. Если код внутри большой, то это может существенно повлиять на скорость загрузки страницы.
По этой причине принято ставить теги в самом конце разметки, перед закрывающим тегом < / body>. Тогда браузер, дойдя до скриптов, уже загрузит всю страницу и пользователь сможет взаимодействовать с контентом.
Размещение в других частях разметки без очевидной надобности считается плохой практикой.
�� Один скрипт — один .
Нельзя одновременно написать код внутри тега и в нём же указать атрибут src со ссылкой на внешний файл. Браузер пойдёт по ссылке за кодом, а то, что написано внутри проигнорирует.
console.log("Hello, world!"); // Этот код будет проигнорированscriptsrc="./js/main.js">console.log("Hello, world!");// Этот код будет проигнорированscript>
Поэтому если нужно и подключить внешний файл и написать код внутри разметки — используй два отдельных тега.
�� Порядок имеет значение.
Если ты используешь какие-то сторонние библиотеки при разработке сайта, то обрати внимание на порядок подключения скриптов — на порядок, в котором следуют теги script с путями до разных файлов.
Обычно достаточно в точности скопировать код из инструкции по работе с библиотекой.
Начинающие разработчики частенько игнорируют порядок подключения и потом ищут причины почему у них не работает то, что работать должно ��
Самым частым примером является подключение библиотеки, написанной с использованием jQuery. Чтобы код верно работал, в первом теге script нужно подключить саму библиотеку jQuery, а уже затем, ниже, в следующем теге script подключать остальной код библиотеки.
�� Библиотекой называют код, написанный сторонним разработчиком или группой разработчиков, и доступный для свободного использования в качестве готовой подпрограммы на вашем сайте. Например, эта библиотека пригодится, если нужен простой удобный слайдер.
На собеседовании
Скопировать ссылку «На собеседовании» Скопировано
Почему принято размещать со стилями внутри , а перед закрывающим тегом < / body>? Когда можно нарушить это правило?
Скопировать ссылку «Почему принято размещать link со стилями внутри head, а script перед закрывающим тегом /body? Когда можно нарушить это правило?» Скопировано
Когда мы размещаем стили внутри тега , браузер понимает как и с какими стилями отрисовывать контент при первом рендере. То есть, чтобы отобразить страницу, браузеру нужно знать какой контент нарисовать (HTML) и как должны выглядеть элементы (CSS). Если браузер не получит CSS заранее, то HTML-элементы сначала отобразятся со стилями по умолчанию, а после загрузки CSS применяться новые стили. Это вызовет мигание контента. Добавление тега co стилями в начало документа предотвращает повторную перерисовку.
Тег обычно идёт перед закрывающимся тегом < / body>. Это даёт уверенность, что элементы, к которым идёт обращение в скрипте, существуют на странице.
Мы можем размещать скрипт в , если он должен выполнится первым и не полагается на то, существует ли элемент на странице. Или если добавляем атрибуты async или defer к тегу . Про их отличия можно почитать подробнее в доке про .
defer сообщает браузеру, что скрипт нужно загружать в фоновом режиме и запустить его, как только DOM-дерево будет полностью построено.
Ещё один способ — указать атрибут , который говорит браузеру, что скрипт нужно запустить как модульный. Модульные скрипты по дефолту являются отложенными, то есть равносильно , и указание defer не будет иметь никакого эффекта.
Скопировать ссылку «Объясните разницу между script, script async и script defer.» Скопировано
Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.
