How to change active and hovering text in Javascript depending on condition?-CodePudding

I have these divs that I use as buttons.

var color_switch = 1;
var tmbtns = document.getElementsByClassName("time-button");
    for (var i = 0; i < tmbtns.length; i  ) {
      tmbtns[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("active2");
        current[0].className = current[0].className.replace(" active2", "");
        this.className  = " active2";
      });
    }

.time-buttons{
        float: left;
    }
    
    .time-button{
        float: left;
        padding: 0.2rem;
        padding-bottom: 0.3rem;
        margin-left: 1px;
        margin-right: 1px;
        cursor: pointer;
        color: lightgrey;
        width: 30px;
        text-align: center;
    }
        
    .active2, .time-button:hover{
            color: red;
        }

<div >
        <div ><small>2h</small></div>
        <div ><small>8h</small></div>
        <div ><small>1d</small></div>
        <div ><small>3d</small></div>
        <div ><small>1w</small></div>
        <div ><small>1m</small></div>
    </div>

How could I make it that when color_switch changes, the color that the text changes to also changes? So when color_switch = 1, the text is highlighted in red, and when color_switch = 2, the text is highlighted in blue, and so on?

CodePudding user response：

For example, you can use switch in which you'll set to what color should the current element be painted.

 switch (color_switch) {
  case 1:
    this.style.color = "red";
    break;

  case 2:
    this.style.color = "blue";
    break;
 }

There are many possible solutions, here is one of them: https://jsfiddle.net/9bj86L72/

CodePudding user response：

I think, the best practice is not merge css code in js, the best is create modifier classes and use it to map it in js. for example:

.time-buttons.type1 .time-button:hover {
  color: red;
}

.time-buttons.type2 .time-button:hover {
  color: red;
}

after in js according to de color_switch set the modifier class

document.querySelector('.time-buttons').className = document.querySelector('.time-buttons').className   " type"   color_switch

please view example in https://codepen.io/ricardocermeno/pen/ExojdVZ

CodePudding user response：

I think this may help you? It's just change the class https://stackblitz.com/edit/web-platform-e6tpu1?file=index.html