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

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

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

Новые блоги и статьи Все статьи Все блоги /
Кредитный калькулятор Maks 05.08.2026 Решение задачи по прикладной информатике средствами 1С. Задача: Напишите приложение-калькулятор, которое помогает рассчитывать параметры кредита для аннуитетного и дифференцированного видов. . .	У нас сейчас поговорку "Опять 25" нужно переделать на "Опять +35". kumehtar 04.08.2026 С ностальгией вспоминаю времена моего детства, когда у нас и правда +25 - была максимальная температура летом. Раньше +25 °C реально казались вершиной жары, когда можно было весь день пропадать на. . .	Как ИИ начал спорить и врать (возможно почуяв опасность для себя от индустрии - уход от электроники). Hrethgir 04.08.2026 Недельный диалог, на фоне событий с НПЗ. Да, из спирта можно получать бензин, и это не сложно. Но потом в схеме я решил избавиться от насоса, при этом полностью сделав контроль подачи спирта в. . .	Термопринтер QR701 Argus19 03.08.2026 Термопринтер QR701 Купил два термопринтера QR701. На сэлф-тесте написано: Language: PC936 (GB18030). Что означает, что принтеры могут печатать только латиницу и китайские иероглифы. Так же. . .
Создание формы заимствованного документа Maks 03.08.2026 Задача: Необходимо создать собственную форму заимствованного документа. На форме должен быть реквизит "Покупатель", а также табличная часть со следующими реквизитами: - Расчетный счет покупателя. . .	Задача предоставления скидок покупателям Maks 03.08.2026 Задача: В документе "Продажи" необходимо реализовать функционал предоставления скидок покупателям. Скидка должна автоматически рассчитываться и подставляться в соответствующее поле при выборе. . .	Почему SEO не начинается с ключевых слов: что проверить до написания текстов Neotwalker 01.08.2026 Когда владельцу сайта предлагают заняться SEO, первым шагом часто становится сбор запросов и написание текстов. Логика кажется понятной: 1. Находим ключевые слова. 2. Добавляем их на. . .	Знание — сила: Доктрина интенциональности знаний, углубление в формулу Hrethgir 01.08.2026 https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11957&stc=1&d=1785567302 Знаменитый афоризм Фрэнсиса Бэкона «Знание — сила» (Scientia potentia est) в массовой культуре принято понимать. . .

Опции темы