Скрипт работает только на главной странице

@Кристина2401 · Регистрация: 07.07.2018

Author24 — интернет-сервис помощи студентам

Подскажите, друзья. Я в js полный нуб, а функцию реализовать хочется. Есть скрипт, который добавляет и убирает классы active-main и active-nav по нажатию на элемент с классом mobile-nav. И этот скрипт работает только на главной странице. В чем может быть проблема? Вот сам скрипт, если еще части кода нужны - выложу:

Javascript

var btns = document.getElementsByClassName('mobile-nav');
var par = document.getElementsByClassName('main');
btns[0].onclick = function() {
  par[0].classList.toggle("active-main");
    btns[0].classList.toggle("active-nav");
}

@AlexZaw · 28.10.2018, 09:36

Скрипт на остальных страницах то подключается? Или только на главной?

@Кристина2401 · 28.10.2018, 18:25 **[ТС]**

Конкретно этот скрипт работает только на главной странице. При этом другие скрипты абсолютно спокойно работают везде.

Добавлено через 22 минуты
Вот так:

Javascript

$(document).ready(function() {
    $('.mobile-nav').click(function() {
    $('.main').toggleClass("active-main");
    $('.mobile-nav').toggleClass("active-nav");
});
});

скрипт тоже работает только на главной странице

Добавлено через 6 минут
Решила проблему подключением скрипта прямо в шапке.

@AlexZaw · 28.10.2018, 19:05

Сообщение от Кристина2401

Решила проблему подключением скрипта прямо в шапке.

Этот скрипт будет работать нормально хоть вы его посередине страницы подключите. Проблема в том что скрипты должны подключаться на КАЖДОЙ странице на которой они должны работать. Вы же, похоже, используете какой-то сборщик проектов по шаблонам, либо CMS с теми-же шаблонами. И изначально скрипт был подключен где то внизу главной страницы, поэтому и работал только на ней. Подключив скрипт в шапке вы, тем самым, исправили эту ошибку. Шапка ведь на каждой странице подключается.

@Кристина2401 · 28.10.2018, 19:09 **[ТС]**

Сайт на php, шапка сайта на каждой странице подключается через require, в ней же (в шапке) подключался файл со скриптами.

@AlexZaw · 28.10.2018, 19:26

Сообщение от Кристина2401

шапка сайта на каждой странице подключается через require, в ней же (в шапке) подключался файл со скриптами.

Я не понял, масло маслянное получается. Скрипт подключался в шапке но не работал.

Сообщение от Кристина2401

Решила проблему подключением скрипта прямо в шапке.

А так заработал. Что изменилось?

@Кристина2401 · 28.10.2018, 20:19 **[ТС]**

Согласна с вами. Очень хороший вопрос почему не получалось. По сути ничего не изменилось, но при этом заработало нормально

@AlexZaw · 28.10.2018, 20:27

Можете выложить код как было и как стало? Прям любопытно стало

@Кристина2401 · 28.10.2018, 21:14 **[ТС]**

Страницы имеют вот такой вид:

PHP/HTML

<?php require"order.php";
 
require"admin/header.php";
require"admin/mistake-popup.php";
require"admin/promo.php";
require"admin/mobile-menu.php";?>
 
    тут обычный html код
      
    
<?php require"admin/footer.php" ?>

Есть файл header.php. Был он вот таким:

PHP/HTML

<!doctype html>
<html lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Брелки на заказ с номером авто</title>
    <meta name="description" content="" />
    <link href="css/css.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script defer type="text/javascript" src="js/all.js"></script>
    <script defer type="text/javascript" src="js/js.js"></script>
    
    <link href="img/icons/32.png" rel="icon" type="image/png" sizes="32x32" />
    <link href="img/icons/64.png" rel="icon" type="image/png" sizes="64x64" />
    <link rel="apple-touch-startup-image" href="img/icons/72.png">
    <link rel="apple-touch-icon" href="img/icons/72.png"/>
    <link rel="apple-touch-icon" sizes="72x72" href="img/icons/72.png"/>
    <link rel="apple-touch-icon" sizes="114x114" href="img/icons/114.png"/>
    <link rel="apple-touch-icon" sizes="144x144" href="img/icons/144.png"/>
    
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"/>
    <meta name="HandheldFriendly" content="True"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="cleartype" content="on"/>
    <meta http-equiv="imagetoolbar" content="no"/>
    <meta http-equiv="msthemecompatible" content="no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="address=no"/>
    <noscript class="no_script_message">
    У вас отключен JavaScript. Сайт может отображаться некорректно. Рекомендуем включить JavaScript.
    </noscript>
    <!-- saved from url=(0014)about:internet -->

Ну и собственно в js.js был тот самый скрипт.

Какой он стал:

PHP/HTML

<!doctype html>
<html lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Брелки на заказ с номером авто</title>
    <meta name="description" content="" />
    <link href="css/css.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script defer type="text/javascript" src="js/all.js"></script>
    <script defer type="text/javascript" src="js/js.js"></script>
    
    <link href="img/icons/32.png" rel="icon" type="image/png" sizes="32x32" />
    <link href="img/icons/64.png" rel="icon" type="image/png" sizes="64x64" />
    <link rel="apple-touch-startup-image" href="img/icons/72.png">
    <link rel="apple-touch-icon" href="img/icons/72.png"/>
    <link rel="apple-touch-icon" sizes="72x72" href="img/icons/72.png"/>
    <link rel="apple-touch-icon" sizes="114x114" href="img/icons/114.png"/>
    <link rel="apple-touch-icon" sizes="144x144" href="img/icons/144.png"/>
    
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"/>
    <meta name="HandheldFriendly" content="True"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="cleartype" content="on"/>
    <meta http-equiv="imagetoolbar" content="no"/>
    <meta http-equiv="msthemecompatible" content="no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="address=no"/>
    <noscript class="no_script_message">
    У вас отключен JavaScript. Сайт может отображаться некорректно. Рекомендуем включить JavaScript.
    </noscript>
    <!-- saved from url=(0014)about:internet -->
    
<script> //по клику добавить или удалить класс active-main и active-nav
    $(document).ready(function() {
        $('.mobile-nav').click(function() {
            $('.main').toggleClass("active-main");
            $('.mobile-nav').toggleClass("active-nav");
        });
    });
</script>

и убрала из js.js скрипт

@AlexZaw · 28.10.2018, 22:02

Кристина2401, вообще странно, все должно было работать. Если только в файле js.js не было никакой ошибки из-за которой скрипт просто не доходил до этой функции

Блоги программистов
Как использовать GraphQL в C# с HotChocolate Programming 05.01.2025 GraphQL — это современный подход к разработке API, который позволяет клиентам запрашивать только те данные, которые им необходимы. Это делает взаимодействие с API более гибким и эффективным по. . .	Модель полного двоичного суматора с помощью логических операций (python) AlexSky-coder 04.01.2025 def binSum(x:list, y:list): s=^y] p=x and y for i in range(1,len(x)): s. append((x^y)^p) p=(x and y)or(p and (x or y)) return s x=list() y=list()	Это мы не проходили, это нам не задавали...(шестибитный асихронный счётчик с управляющим сигналом задержки). Hrethgir 04.01.2025 Асинхронный счётчик на сумматорах (шестиразрядный по числу диодов на плате, но наверное разрядов будет больше - восемь или шестнадцать, а диоды на старшие), так как триггеры прошли тестирование и. . .	Руководство по созданию бота для Телеграм на Python IT_Exp 04.01.2025 Боты для Телеграм представляют собой автоматизированные программы, которые выполняют различные задачи, взаимодействуя с пользователями через интерфейс мессенджера. В данной статье мы рассмотрим,. . .	Применение компонентов PrimeVue в Vue.js 3 на TypeScript BasicMan 04.01.2025 Введение в PrimeVue и настройка окружения PrimeVue представляет собой мощную библиотеку компонентов пользовательского интерфейса для Vue. js 3, которая предоставляет разработчикам богатый набор. . .	Как стать Senior developer cpp_developer 04.01.2025 В современной индустрии разработки программного обеспечения позиция Senior Developer представляет собой не просто следующую ступень карьерной лестницы, а качественно новый уровень профессионального. . .
Что известно о дате выхода Windows 12 и чего от нее ждать IT_Exp 04.01.2025 В мире технологий постоянно происходят изменения, и операционные системы не являются исключением. Windows 11, выпущенная в октябре 2021 года, принесла множество инноваций и улучшений, но. . .	Что новенького в .NET Core 9 Programming 04.01.2025 Обзор ключевых изменений в . NET Core 9 Платформа . NET Core продолжает активно развиваться, и версия 9 представляет собой значительный шаг вперед в эволюции этой технологии. Новый релиз. . .	Инструкция по установке python3.13.1 в Debian 12 AlexSky-coder 03.01.2025 sudo apt update sudo apt install build-essential zlib1g-dev libncurses5-dev libgdbm-dev libnss3-dev libssl-dev libreadline-dev libffi-dev wget. . .	Затестил триггеры. архив проекта прилагаю с GOA файлами в настройках архиватора проектов. Hrethgir 03.01.2025 В этот раз нет закольцованности, потому что от неё только глюки, как я понял, логика не вырезанная. Триггеры очень быстрые если верить измерениям с помощью анализатора от Gowin. Есть ещё регистры,. . .	Python в помощь DevOps IT_Exp 03.01.2025 Причины использования Python в работе DevOps Python стал неотъемлемой частью мира DevOps, и это не случайно. Этот язык программирования обладает множеством преимуществ, которые делают его. . .	Angular vs React vs Vue.js BasicMan 03.01.2025 О, друзья-разработчики и просто любопытные читатели! Сегодня мы отправимся в увлекательное путешествие по миру фронтенд-разработки, и первой остановкой станет Angular – этакий строгий немецкий. . .

@AlexZaw Модератор 2352 / 1720 / 668 Регистрация: 07.08.2016 Сообщений: 4,050
	28.10.2018, 09:36	2
	Скрипт на остальных страницах то подключается? Или только на главной? 0

@AlexZaw Модератор 2352 / 1720 / 668 Регистрация: 07.08.2016 Сообщений: 4,050
	28.10.2018, 19:05	4
	Сообщение от Кристина2401 Решила проблему подключением скрипта прямо в шапке. Этот скрипт будет работать нормально хоть вы его посередине страницы подключите. Проблема в том что скрипты должны подключаться на КАЖДОЙ странице на которой они должны работать. Вы же, похоже, используете какой-то сборщик проектов по шаблонам, либо CMS с теми-же шаблонами. И изначально скрипт был подключен где то внизу главной страницы, поэтому и работал только на ней. Подключив скрипт в шапке вы, тем самым, исправили эту ошибку. Шапка ведь на каждой странице подключается. 0

@Кристина2401 0 / 0 / 0 Регистрация: 07.07.2018 Сообщений: 5
	28.10.2018, 19:09 [ТС]	5
	Сайт на php, шапка сайта на каждой странице подключается через require, в ней же (в шапке) подключался файл со скриптами. 0

@AlexZaw Модератор 2352 / 1720 / 668 Регистрация: 07.08.2016 Сообщений: 4,050
	28.10.2018, 19:26	6
	Сообщение от Кристина2401 шапка сайта на каждой странице подключается через require, в ней же (в шапке) подключался файл со скриптами. Я не понял, масло маслянное получается. Скрипт подключался в шапке но не работал. Сообщение от Кристина2401 Решила проблему подключением скрипта прямо в шапке. А так заработал. Что изменилось? 0

@Кристина2401 0 / 0 / 0 Регистрация: 07.07.2018 Сообщений: 5
	28.10.2018, 20:19 [ТС]	7
	Согласна с вами. Очень хороший вопрос почему не получалось. По сути ничего не изменилось, но при этом заработало нормально 0

@AlexZaw Модератор 2352 / 1720 / 668 Регистрация: 07.08.2016 Сообщений: 4,050
	28.10.2018, 20:27	8
	Можете выложить код как было и как стало? Прям любопытно стало 0

@AlexZaw Модератор 2352 / 1720 / 668 Регистрация: 07.08.2016 Сообщений: 4,050
	28.10.2018, 22:02	10
	Кристина2401, вообще странно, все должно было работать. Если только в файле js.js не было никакой ошибки из-за которой скрипт просто не доходил до этой функции 0