Блог

Главная - Вопросы по программированию - Тумблер не вернет основную тему при втором нажатии

Тумблер не вернет основную тему при втором нажатии

#javascript #html

#javascript #HTML

Вопрос:

Сначала щелкните по нему, чтобы изменить тему, но когда я нажимаю 2-й раз, ничего не происходит, как будто это навсегда вторая тема. Поэтому он должен менять тему при каждом нажатии. Кто-нибудь может помочь мне, пожалуйста.

 let element = document.getElementById('body');
let toggle = document.getElementById('toggle-button');

toggle.addEventListener('click', function() {
    if (element.className == 'dark') {
        element.className = 'light';
    } else {
        element.className = 'light';
    }
});  
 body {
  height: 100vh;
  font-family: 'Inter', sans-serif;
  color: white;
  margin: auto 165px;
  padding-top: 50px;
  background: linear-gradient(to bottom, #20222F 25%, #1D2128 75%);
}

.dark {
  background: black;
}

.light {
  background: burlywood;
}  
 <div class="toggle-button" id="toggle-button">
  <span>Dark Mode</span>
  <input type="checkbox" class="checkbox" id="checkbox">
  <label for="checkbox" class="label">
    <div class="ball"></div>
  </label>
</div>

Ответ №1:

Вы пытаетесь ссылаться на класс и тег body как на идентификатор — document.getElementById . И я заменил ваши if условия на toggle() method , указав burlywood в нем цвет, поскольку ваше тело уже имеет black цвет по умолчанию.

 let element = document.querySelector('body');
let toggle = document.querySelector('.toggle-button');

toggle.addEventListener('click', function() {
  element.classList.toggle('light')
});  
 body {
  height: 100vh;
  font-family: 'Inter', sans-serif;
  color: white;
  margin: auto 165px;
  padding-top: 50px;
  background: linear-gradient(to bottom, #20222F 25%, #1D2128 75%);
}

/*.dark {
  background: black;
}*/

.light {
  background: burlywood;
}  
 <div class="toggle-button" id="toggle-button">
  <span>Dark Mode</span>
  <input type="checkbox" class="checkbox" id="checkbox">
  <label for="checkbox" class="label">
    <div class="ball"></div>
  </label>
</div>