Как написать функцию для изменения цвета текста и фона, а также для изменения текста p нажатием всего одной кнопки? ⇐ CSS

[Гость]

Скриншот меню главной страницы, включая кнопку «Обычная», чтобы сделать страницу более доступной



Я только программирую свой первый веб-сайт и хочу иметь две его версии. Один сложный и один простой/доступный с соблюдением требований доступности.

Это означает, что мне нужно перейти с версии 1 на версию 2:
[*]a) язык/содержание (поэтому мне нужен доступ к p, h1, h2 разных разделов) [*]б) стиль (цвет фона всех разделов, цвет всех разделов и т. д.).
Моя идея заключалась в том, чтобы использовать для этого кнопку с функцией Click-Event, а затем использовать:
[*]a) внутренний текст для изменения содержимого [*]b) addClasslist, чтобы создать список классов, характеристики которого (цвет и т. д.) я хочу изменить.
Моя первая попытка была такой:

HTML навигации

ES DE Обычный Проекты Навыки О программе Свяжитесь со мной Меню [/i] JAVASCRIPT

const доступный = document.querySelector(".accessible"); const body = document.querySelector("complex"); доступный.addEventListener('click', () => body.classList.add('add-accessibility')); Как получить доступ к внутреннему тексту здесь?

CSS нового списка классов для тела (.complex)

.add-accessibility { цвет: #2b2c2c; цвет фона: #eae4dd; } Пока это совершенно не работает. Список классов не добавляется в тело, как я написал функцию, когда нажимаю кнопку.

У вас есть идеи, как написать работающую функцию для всех этих изменений, необходимых в содержании и стиле? А знаете, в чем ошибка моей идеи выше? почему он даже не добавляет список классов?

Моей другой идеей было использовать функцию с if/else. Если это лучший выбор, я также рад услышать ваши идеи.

Другим вариантом может быть создание второго документа стилей CSS и переход к нему, нажав кнопку, но тогда я все еще не знаю, как получить доступ к внутреннему тексту, если моя функция выше не работает.