Оператор if не работает с текстовыми цветами

Question

Хорошо, в основном я пытаюсь переключить цвет элемента ap, который изменяется, но все равно, что если условие всегда ложно:

Html:

<p id="brand-element-Samsung" onclick="itemSelectedSamsung()" style="color: #ff0000">Samsung</p>


Sass:

p
              width: 50%
              margin: 25px 23px 20px 23px
              padding: 15px 15px 15px 15px
              cursor: pointer
              &:hover
                color: #a3abb1
                transition: color .2s ease


Js:

function itemSelectedSamsung() {
  var inactiveColor = "#ff0000"
  var activeColor = "#2c3e50"
  var hoveredColor = "#a3abb1"
  var text = document.getElementById('brand-element-Samsung')
  text.style.transition = "all .2s ease"
  text.style.color === activeColor ? text.style.color = inactiveColor : text.style.color = activeColor
}

Answer 1

Распечатайте свой text.style.color. Он будет в формате rgba(), а не в соответствии с правилом CSS в формате HEX. Вот почему это не работает.

Так что вы также должны использовать rgba() для activeColor.

НО Лучший подход - проверить, имеет ли элемент определенный класс, и поместитьцвета в правилах CSS:

.brand-element-Samsung {
    color: #ff0000;
}

.brand-element-Samsung.active {
    color: #2c3e50;
}

$(document).on('click', '.brand-element-Samsung', function () {
    $(this).toggleClass('active');
});