Javascript для переключения цвета кнопки

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

  <button id="button">button</button>
  <script>
  function changeColor(button) {
      
        var thisButton = document.getElementById(button)

        if (thisButton.style.background == '#0f0') {
          thisButton.style.background='#0f0';
        } else {
          thisButton.style.background='#f00';
        }

      }

    </script>

Если я использую в качестве цветов «красный» или «зеленый», это работает, но если я использую шестнадцатеричный код, как указано выше, или rgb (255,0,0), if всегда возвращает false. Есть идеи, что я делаю не так?

Возможный дубликат Как сравнить backgroundColor в Javascript?

Maor Refaeli 31.10.2018 13:15
0
1
51
5

Ответы 5

Вы используете неправильные шестнадцатеричные коды.

Красный - #FF0000, зеленый - #008000.

Вы сравниваете цвет фона с короткой версией шестнадцатеричного кода. Сравните это с полным шестизначным шестнадцатеричным кодом:

if (thisButton.style.background.toLowerCase() == '#00ff00')

Но подумайте об использовании для этого некоторых классов. Смена классов - намного лучший способ.

Согласен, лучше бы два класса btn-pending и btn-completed. это также сделает код чище, если вы хотите изменить не только цвет кнопки. Тогда все, что вам нужно сделать, это переключить классы.

Stefan William-Worrall 31.10.2018 13:17

У меня работает, может попробовать использовать document.querySelector вместо document.getElementById.

Похоже, браузер "автокорректирует" примененный цвет. В моих тестах, если я устанавливаю thisButton.style.background = 'rgb(255,0,0)', а затем считываю значение обратно с помощью console.log(thisButton.style.background), он добавлял бы пробел после каждой запятой, давая мне rgb(255, 0, 0). См. эта рабочий пример для демонстрации.

Предлагаю добавить атрибут data-color, который будет полностью под вашим контролем.

  function changeColor(button) {
    var thisButton = document.getElementById(button)

    if (thisButton.getAttribute('data-color') === 'red') {
      thisButton.style.background='#0f0';
      thisButton.setAttribute('data-color', 'green');
    } else {
      thisButton.style.background='#f00';
      thisButton.setAttribute('data-color', 'red');
    }

  }

Свойство стиля цвета фона сильно зависит от браузера. Chrome может выводить что-то вроде rgb(0, 255, 0), а Internet Explorer может выводить #00FF00.

Попробуйте удержать состояние кнопки в собственной модели.

const myButtonModel = {
    color: "#0F0"
};

function changeColor() {
    const buttonElement = document.getElementById("button");

    myButtonModel.color = myButtonModel.color === "#0F0" ? "#F00" : "#0F0";

    buttonElement.style.background = myButtonModel.color;
}

Если вы хотите иметь класс вместо (btn-toggled), вы можете сделать это следующим образом:

const buttonElement = document.getElementById("button");
buttonElement.classList.toggle("btn-toggled")

Другие вопросы по теме