Смена цвета c JS

@Kukla Vudu · Регистрация: 23.06.2017

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

Дан HTML код, как мне не меняя контента в теге <body>, с помощью JS сделать так, чтобы при нажатии на кнопку one у всех параграфов менялся цвет на красный, при нажатии на two менялся цвет у каждого второго параграфа на зеленый, а при нажатии на three менялся цвет у каждого третьего на черный, подскажите пожалуйста, никак сообразить не могу...

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
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="one">Все</button>
    <button id="two">Каждый второй</button>
    <button id="three">Каждый третий</button>
    <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies mi non molestie efficitur. Donec euismod lorem in laoreet consectetur. Donec nisl lacus, efficitur sed ultrices ut, accumsan vitae tortor. Sed sit amet vestibulum nibh. Nunc ullamcorper gravida risus, nec semper quam venenatis at. Donec fermentum id est vitae posuere. Maecenas accumsan quis lacus id venenatis. Nunc ultrices nulla a mauris dignissim cursus. Praesent sit amet neque sollicitudin diam blandit eleifend laoreet at nisl. Vestibulum mattis nisi quis orci feugiat pellentesque.
    </p>
    <p>
            Mauris in mauris vitae urna porta commodo. Aliquam dignissim semper eros, eu tristique felis sodales eget. Fusce nec ante nec nisl auctor egestas sed ac elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur scelerisque id dolor consequat laoreet. Aenean semper justo non feugiat accumsan. Nunc eget ligula ullamcorper, interdum est in, eleifend justo. Cras sed pulvinar orci.
    </p>
    <p>
            Mauris nec quam enim. Cras eget dignissim dolor. Donec pretium ex eget pharetra scelerisque. Proin nulla justo, tempor vitae augue sit amet, scelerisque commodo neque. Aliquam interdum tellus dictum, interdum felis tincidunt, condimentum nisi. Donec et ullamcorper tortor, ac efficitur neque. Mauris ante eros, mattis sed luctus in, volutpat ac risus. Suspendisse laoreet est magna, in commodo nisl venenatis non. Curabitur quis auctor nisl.
    </p>
    <p>
            Duis ut dictum nunc, vel efficitur purus. Praesent pellentesque purus at tellus tristique consectetur. Nulla malesuada mattis ipsum vitae facilisis. Aliquam aliquet tempor tristique. Vivamus vel leo scelerisque, cursus risus nec, tempor odio. Nam a consequat arcu. Morbi massa elit, scelerisque quis turpis in, iaculis sollicitudin nisi. Praesent ut orci nec nisl finibus ornare vitae nec libero. Donec nisi elit, elementum id lectus in, tempor suscipit eros. Proin ultricies eu nibh ac fermentum. Phasellus rutrum felis augue, eu rhoncus velit ultrices quis. Nulla tempus nisl ut cursus commodo. Maecenas sit amet risus feugiat, tristique risus ut, auctor purus. Donec vehicula nunc justo, sit amet imperdiet turpis accumsan vel.
    </p>
    <p>
            Sed nisi justo, faucibus vel velit eu, blandit bibendum eros. Pellentesque at libero ligula. Nunc ultricies ligula eget odio pharetra auctor. Ut commodo dolor justo, aliquam blandit mauris facilisis vel. Donec consectetur venenatis mauris, scelerisque tincidunt nibh. Maecenas porttitor nisl vel fermentum tincidunt. Aliquam erat volutpat. Cras tincidunt augue ex, et blandit dolor vestibulum eu. Aenean enim ex, fermentum id fringilla eget, tincidunt sit amet ante. Quisque non velit porta, scelerisque massa faucibus, posuere mauris. Sed facilisis lacinia tempus. Quisque sed euismod est. Pellentesque nibh nunc, feugiat in diam pulvinar, facilisis porttitor nulla.
    </p>
    <p>
            Fusce orci dui, auctor ut posuere eget, pellentesque at erat. Aliquam accumsan diam at ultricies posuere. In placerat vitae justo ac elementum. Suspendisse accumsan elit vitae congue mattis. Nulla malesuada hendrerit dolor vitae consequat. Ut imperdiet nisl dui, non mattis nulla finibus a. Nullam at varius ligula. Nullam bibendum tellus vitae urna mollis pharetra. Aliquam vitae sapien lacus. Fusce consequat, urna et sollicitudin lobortis, dolor orci fermentum justo, nec rhoncus ligula lectus iaculis mi. Aliquam erat volutpat. Nam blandit congue turpis, sit amet viverra erat bibendum eget. Praesent vestibulum sapien et nisi fermentum porta. Cras rutrum justo odio, in pretium mauris commodo in. Nam vitae fringilla nunc.
    </p>
    <p>
            Sed pretium leo odio, in consectetur est pellentesque ac. Donec eget felis semper, egestas velit eget, fringilla magna. Cras nulla risus, auctor quis nisl hendrerit, volutpat semper nulla. Mauris id ligula consequat, pretium lectus id, feugiat elit. Proin sed nisi hendrerit, pretium libero bibendum, commodo ligula. Vestibulum semper augue malesuada tempus vestibulum. Vivamus lobortis neque ipsum, id eleifend magna cursus vel. In nec dui sit amet metus pulvinar sodales nec sit amet diam. Aenean sodales risus in libero sagittis accumsan. Duis porta non mi quis feugiat. Duis cursus elit diam, in condimentum diam tempor nec.
    </p>
    <p>
            Sed volutpat dui magna, sit amet consectetur erat venenatis cursus. Mauris dignissim consequat lacus, vitae malesuada dolor fringilla quis. Nulla velit ex, mollis eu aliquet eget, tempor eget orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus condimentum turpis rutrum nibh aliquam, vel scelerisque risus viverra. Mauris diam urna, viverra sit amet auctor et, pellentesque in tortor. Maecenas condimentum, ligula a varius faucibus, nisl nisi feugiat massa, vitae fringilla leo ante vel quam. Phasellus consequat tempus felis ac sagittis. Sed vitae luctus ipsum. Etiam pharetra eros vel nisi pretium dictum.
    </p>
    <p>
       Suspendisse molestie augue sed eleifend laoreet. Sed tincidunt malesuada dui, ut blandit quam pellentesque in. Vivamus congue facilisis dictum. Pellentesque tincidunt et lorem nec mollis. Etiam condimentum ex vel diam sodales, eu vulputate libero posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In et purus quis neque rhoncus varius. Quisque at efficitur lorem. Praesent ullamcorper justo urna, in convallis velit vehicula ut. Aenean vel arcu at sapien blandit fringilla. Nullam gravida mi nec nisl dapibus, id molestie ligula ullamcorper. Aliquam erat volutpat. Curabitur vitae elit quis felis lacinia interdum a vel odio. Vivamus nec lacinia turpis.
    </p>
</body>
</html>

@klopp · 03.02.2018, 19:04

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var pp = document.getElementsByTagName('p');
 
document.getElementById('one').addEventListener('click', () => {
    for(let i = 0; i < pp.length; i++)
        pp[i].style.color = 'red';
    });
document.getElementById('two').addEventListener('click', () => {
    for(let i = 1; i < pp.length; i += 2)
            pp[i].style.color = '#7FFFD4';
    });
document.getElementById('three').addEventListener('click', () => {
    for(let i = 2; i < pp.length; i += 3)
        pp[i].style.color = '#A9A9A9';
    });

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Смена цвета c JS

Решение