Q: An if statement is not working whit text colors Ok basically what I am trying to do is toggleing the color of a  p element taht changes but is like if the condition is always false:
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
}



A: Print out your text.style.color. It will be in rgba() format and not as stated by CSS rule in HEX format. That's why it's not working.
So you should also use rgba() for activeColor.
BUT better approach is to check if element has certain class and put colors in CSS rules:
.brand-element-Samsung {
    color: #ff0000;
}

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

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

