Почему мои текстовые тени не выключаются при использовании функции подкачки?

Question

Итак, я делаю «Мини-ОС» ОС, которая работает в вашем браузере, и на вкладке «Настройки»> «Доступность» у меня есть возможность включить / выключить тени текста (по умолчанию включено). Но тени текста не отключатся (я использую CSS и JavaScript).

Я попытался проверить на наличие опечаток и просмотреть журналы ошибок, но ничего не было найдено. Переменная, используемая в качестве заполнителя (ApplyTextShadows), переключает свое значение, а тени текста - нет.

//the code to control the shadows
if(ApplyTextShadows == "on") {
    document.write("<style>h2 {text-shadow:5px 10px #8888;}</style>");
}
//the code where the button to toggle the setting
document.write("<h2 onclick=\"swapShadows()\">Text Shadows ("+ApplyTextShadows+")</h2>");
//the function itself
function swapShadows() {
    if(ApplyTextShadows == "on") {
        ApplyTextShadows = "off";
    } else {
        ApplyTextShadows = "on";
    }
    openAccessibility();
}

Я ожидал, что код отключит тени. Но это ничего не сделало.

Answer 1

Используйте класс, который вы добавляете и удаляете.

function swapShadows() {
  document.querySelectorAll("h2").forEach(el =>
    el.classList.toggle("shadow")
  );
}

h2.shadow {
  text-shadow: 5px 10px #8888;
}

<h2 onclick="swapShadows()">Text Shadows ("+ApplyTextShadows+")</h2>