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 class="time-buttons">
<div class="time-button active2"><small>2h</small></div>
<div class="time-button"><small>8h</small></div>
<div class="time-button"><small>1d</small></div>
<div class="time-button"><small>3d</small></div>
<div class="time-button"><small>1w</small></div>
<div class="time-button"><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?
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/
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