Как сделать на чистом 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

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

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

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .