@unknowndeal

Неправильно отрабатывает нажатие кнопки. Как исправить?

При нажатии на кнопку должен отрабатываться некий функционал, а после этого кнопка должна поменять внешний вид с помощью бутстрапа (содержимое innerText меняет внешний вид). Весь функционал отрабатывает всегда и стабильно. кроме смены внешнего вида. Внешний вид поменяется только если нажать кнопку два раза. В чем может быть проблема?
function changeButton(){
      let state = localStorage.getItem("state");
      let element = document.querySelector("#menu-icon")
      switch(state) {
          case 'false':
             localStorage.setItem("state", true)
              element.innerText = 'volume_up';
              break;
          case 'true':
             localStorage.setItem("state", false)
             element.innerText = 'volume_off';
              break;
      }
  }
  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ответы на вопрос 1
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай
Помимо оператора логического ветвления, проблема в том, что при нажатии кнопки, вы выводите состояние из хранилища и записываете обратное состояние.
Вам нужно получать значение реверсить, отрисовывать и записывать уже измененное

Накидал примерный код, с реакторингом оператора логического ветвления:
function changeButton(){
      let state = !new Boolean( localStorage.getItem("state") );
      let element = document.querySelector("#menu-icon")

      element.innerText = state ? 'volume_up' : 'volume_off';
      localStorage.setItem("state", state )
  }


И без рефакторинга:
код

function changeButton(){
      let state = localStorage.getItem("state");
      let element = document.querySelector("#menu-icon")
      switch(state) {
          case 'true':
             localStorage.setItem("state", true)
              element.innerText = 'volume_up';
              break;
          case 'false':
             localStorage.setItem("state", false)
             element.innerText = 'volume_off';
              break;
      }
  }


Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы