Как сделать на чистом JS

@Segera · Регистрация: 03.06.2020

Есть как бы "рыба" проекта. Он будет конечно другим, но суть примерно похожая

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>как сделать тёмную тему на сайте</title>
    <!--https://htmlacademy.ru/blog/css/dark-mode?utm_source=tg&utm_medium=social&utm_campaign=ab_dark-mode_30082023
        
        <script src="js"></script>
    -->   
    <link rel="stylesheet" href="css/test_css.css">
    <link rel="stylesheet" href="css/ChangeBodyDark_Light.css">
    <link rel="stylesheet" href="css/Button01.css"> <!--стиль кнопок здесь не важен, поэтому их CSS не приведен--> 
</head>
<body>
    <h1>Как переключение темы на сайте</h1>
    <h2>Редакция HTML Academy</h2>
 
    <button class="btn-Light" id='themeToggleLight'>Переключить яркость</button>
    <button class="btn-Color" id='themeToggleColor'>Переключить цвет</button>
    <h1>Текст ни о чем</h1>
    <p>Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет выполнять важные задания по разработке форм развития. Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в формировании новых предложений.
        Товарищи! дальнейшее развитие различных форм деятельности играет важную роль в формировании существенных финансовых и административных условий. Равным образом рамки и место обучения кадров требуют от нас анализа направлений прогрессивного развития. Не следует, однако забывать, что реализация намеченных плановых заданий позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Разнообразный и богатый опыт начало повседневной работы по формированию позиции способствует подготовки и реализации соответствующий условий активизации</p>
    <ul>
        <li>Элемент списка 1</li>
        <li>Элемент списка 2</li>
        <li>Элемент списка 3</li>
    </ul>
    <div class='boxed-text'>
        Взросление - это когда понимаешь, что родители не идеальные, а мудрость - что ты не идеальный.<br>
        Собрался еврейский конгресс с повесткой дня: «Почему евреи отвечают вопросом на вопрос?»...<br>Конгресс вынес резолюцию: «Ну и что?»
    </div>
   
    <script src="js/ChangeBodyDark_Light.js"></script>
 </body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
body {
    font-family: Arial, sans-serif;
    transition: background-color 1.1s ease;
}
body.light-theme {
    background-color: rgb(242, 242, 242);
    color: rgba(5, 14, 90, 0.7);
}
body.dark-theme {
    background-color: rgb(47, 47, 47, 0.5);
    color: rgb(198, 250, 11);
}
.boxed-text {
    display:block;
    margin:auto;
    position: absolute;
    border: 8px solid currentColor;
    width: 60%;
    padding: 15px;
    margin-top: 20px;
    text-align: center;
    left: 20%;
    align-items: center;
    justify-content: center;
}
 
body.Green-theme {
    background-color: rgb(41, 114, 12, 0.5);
    color: rgba(16, 13, 216, 0.7);
}
body.Red-theme {
    background-color: rgba(170, 5, 5, 0.5);
    color: rgb(10, 255, 72);
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
document.getElementById('themeToggleLight').addEventListener('click', function() {
    const currentTheme = document.body.className;
    if (currentTheme === 'light-theme') {
        document.body.className = 'dark-theme';
    } else {
        document.body.className = 'light-theme';
    }
});
 
document.getElementById('themeToggleColor').addEventListener('click', function() {
    const currentTheme = document.body.className;
    if (currentTheme === 'Green-theme') {
        document.body.className = 'Red-theme';
    } else {
        document.body.className = 'Green-theme';
    }
});

Вопрос первый.
Всё работает в шаблоне. Для этого примера кнопки изменяют яркость или цвет страницы. Все JS отрабатывают по клику
Но есть задача, которая может расти по количеству кнопок и конечно разному выполнению функционала. Где разводить и множить разные ID с одинаковой задачей в Js как-то не нравится.
Сделал подобное в Bootstrap. По нему уже был вопрос и всё решено. Но Bootstrap как и jQuery могут не подойти, т.к. у них свои шаблоны, а переписать bootstrap так себе затея. Которая может перейти в вопрос №2.
Какое решение сделать или какую теорию копать, чтобы понять как на чистом JS сделать компактный и универсальный код для выполнения различных ID или классов в HTML. Если примером из двух HTML - JS из приведенных выше.
Т.е. чтобы не выбирать document.getElementById('свой заявленный ID в Html), а использовать какой-то общий для всех кнопок, спанов и т.д.

Вопрос второй. Чем открывать Bootstrap, jQuery, чтобы там не читалась не читаемая мешанина из кода. Использовать BootStrap Studio или расширение в VsCode. Что оптимальнее по опыту.
Использовать два инструмента для одной задачи пока не очень нравится.
Может есть какое-то более удобное расширение в VsCode, которое опробовано и успешно помогает?
Зачем это надо, чтобы не использовать эти фреймворки как черные ящики. Есть проекты со старыми версиями Bootstrap, jQuery. Там какие-то 3.3.0 и ниже, которые можно взять с каких-то левых сайтов, а не основного репозитория. К тому же лучше использовать с апдейтами. Но подключить к старой верстке не получается по известной причине. Другие ID, названия классов.
Надо как-то по приемлемому виду в них разобраться. Что тут может помочь? Перечитывать документацию и сравнивать для разных версий? Ну как-то так себе идея.

Да. ВСЕХ с Днем Знаний!

@Usaga · 07.09.2023, 16:32

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

по моим понятиям недоджуна, это код без использования сторонних фреймворков и плагинов. Назовите как больше нравится.

Я выше так прямо и сказал: это - свой собственный фреймворк. Только заточенный под конкретный проект. Т.е. если ты не станешь брать фреймворк, а начнёшь писать нечто свой, заточенное под конкретный проект, то это не значит, что у тебя в проекте нет фреймворка и у тебя "чистый" JS. Это реально значит, что у тебя в проекте используется SegeraJS. Без шуток.

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

Еще раз, пример в начале топика от 01.09.2023, 09:28 надо изменить, чтобы не множить document.getElementById('...ID').

Тебе же 01.09.2023 ответили как это сделать: берём Knockout, Vue, Riot и либо используем их, либо смотрим как они используются и пишем тоже самое. В чём вопрос ещё? Нужны идеи? Их уже десятки реализованы. Можно подглядеть. Нужны примеры реализаций? Гитхаб забит. Что ещё нужно? Какой ответ нужен-то?

@Segera · 08.09.2023, 07:04 **[ТС]**

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

Какой ответ нужен-то?

развития первого варианта ответа со слов Я выше так прямо и сказал: пожалуй более предпочтительнее.
Не думал, что написанный в 12 строк JS, кстати если уж быть честным не сам построчно придумал, а брал основы у других, будет классифицироваться как фреймворк. Может это такая терминология в JS. Любой ****.js так называть.
Понятно, использовать Knockout, BootStrap, jQuery ... это выход. У него есть ровно один недостаток. Работает в конкретном случае. Изменить его не менее просто, чем написать новый. Конечно иметь соответствующий уровень знаний и практики.
Ну что ж, не сомневался в этом направлении.
Всем спасибо. Возможно будет повод вернуться с новой идеей.

@Usaga · 08.09.2023, 08:20

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

Возможно будет повод вернуться с новой идеей.

Заходи ещё) Только вопросы задавай более предметно)

Новые блоги и статьи Все статьи Все блоги /
[golang] Конкурентный fetcher с ограничением максимального количества одновременных HTTP запросов. alhaos 10.06.2026 Задача Реализовать конкурентный fetcher с ограничением максимального количества одновременных HTTP запросов. Сигнатура func Fetch(urls string, maxConcurrent int) Result Пример urls :=. . .	[golang] Состояние гонки (race condition) alhaos 10.06.2026 Состояние гонки (race condition) Состояние гонки (Race Condition) — это ошибка, возникающая при одновременном доступе нескольких горутин к одним и тем же данным без должной синхронизации. При этом. . .	Взрослые отношения, и почему они не получаются kumehtar 09.06.2026 Когда в детстве ребёнок не получает от родителей чего-то важного, он лишается не просто приятных переживаний, а основы для формирования определённых внутренних качеств и навыков. Если ребёнок не. . .	[golang] Worker Pool alhaos 09.06.2026 Worker Pool Worker Pool — паттерн конкурентной обработки задач в Go. Суть: фиксированное количество горутин-воркеров читают задачи из общего канала и пишут результаты в общий канал результатов. . . .
[golang] Pipeline alhaos 08.06.2026 Pipeline Pipeline — паттерн конкурентной обработки данных в Go. Суть: данные проходят через цепочку независимых стадий, каждая из которых работает в своей горутине и общается с соседями через. . .	Свет внутри себя kumehtar 07.06.2026 Пусть это будет здесь lIs4oanZS9Y	Программа для com-порта Uhbif79 05.06.2026 Всем привет, давно хотел изучить Qt, начинал, бросал, потом снова начинал. И сейчас вот смог написать свою первую программу. До этого имел опыт программирования микроконтроллеров, писал прошивки на. . .	Транскрипция 55-минутного видео через Whisper: WhisperDesktop облажался, спас Google Colab[ anaschu 01.06.2026 Понадобилось получить текст из свежезагруженного видео на YouTube. Казалось бы, задача на пять минут. Заняла полтора часа. Делюсь опытом — может кому пригодится последовательность решений. . . .