При каждом клике на кнопку, светлая тема меняется на тёмную и обратно. А текст кнопки, меняется только один раз: с тёмной на светлую. Почему?

Question

Доброго времени суток всем!
Вопрос в заголовке. Т.е. при каждом клике на кнопку, светлая тема - меняется на тёмную и так попеременно, всё отлично получается: с light-theme на dark-theme. А вот текст на кнопке, так, всегда поочерёдно, не меняется. Происходит только единожды, от самого первого клика на кнопку, а потом НЕ меняется: с DARK-theme на LIGHT-theme, а вот уже на DARK-theme - не меняется, почему? Т.е. при остальных кликах, темы меняют друг друга с light на dark. А текст кнопки при этом, меняется только один раз (при первом клике): с DARK-theme на LIGHT-theme. И потом, всегда на кнопке только "LIGHT-theme" - текст, почему? Подскажите пожалуйста, уважаемые форумчане, как мне текст на кнопке менять так же каждый раз при клике с LIGHT-theme на DARK-theme и обратно?? Заранее, спасибо, за внимание!

<body class="page light-theme">

<button type="button" id="btnColor" class="theme-color">DARK-theme</button>

$('.theme-color').click(function() {
        var page = document.querySelector('.page');
    
        if (($(this).html('light-theme')) && $('#btnColor').html('DARK-theme')) {
            page.classList.toggle('dark-theme');
            $('#btnColor').html('LIGHT-theme');
        }
        else {
            page.classList.toggle('light-theme');
            $('#btnColor').html('DARK-theme');
        }
    });

Answer 1

Вариант JavaScript, без jQuery:

const theme = document.getElementById('theme');
const button = document.getElementById('button');

document.getElementById('button').addEventListener('click', function() {

  if (!document.querySelector(".theme").classList.contains("DARK-theme")) {
    theme.classList.add("DARK-theme");
    theme.classList.remove("LIGHT-theme");

  } else {
    theme.classList.remove("DARK-theme");
    theme.classList.add("LIGHT-theme");
  }

  button.innerHTML == 'Открыть ночную тему' ? button.innerHTML = 'Открыть дневную тему' : button.innerHTML = 'Открыть ночную тему';
});

.theme {width: 100%; height: 100vh;}
button {position: absolute; top: 20px; left: 20px;}

.LIGHT-theme {
  background: white;background: url(http://3.bp.blogspot.com/-KDPLNPW2Gh8/T05qrRkzjjI/AAAAAAAALvU/61x7U-hduUs/s1600/Spring+Wallpapers+7.jpg);background-size: cover;
}

.DARK-theme {
  background: black;background: url(http://3.bp.blogspot.com/-KDPLNPW2Gh8/T05qrRkzjjI/AAAAAAAALvU/61x7U-hduUs/s1600/Spring+Wallpapers+7.jpg);background-size: cover;filter: brightness(0.3);
}

<div id="theme" class="theme LIGHT-theme"></div>
<button id="button">Открыть ночную тему</button>

БЛОГ НА HUSL

При каждом клике на кнопку, светлая тема меняется на тёмную и обратно. А текст кнопки, меняется только один раз: с тёмной на светлую. Почему?

Ответы (1 шт):