mercredi 27 décembre 2017

Change font color if checkbox is checked

Problem

If the checkbox is checked the font color of the buttons are changing to blue, but if i click one of the other 2 buttons the font color is still orange. If the checkbox is unchecked after, the home button will be white instead of orange.

Code

var fontcolor = document.getElementsByClassName('color');
var cbs = document.querySelectorAll('input[type=checkbox]');
var currentActive = document.getElementsByClassName('active');
for (var i = 0; i < cbs.length; i++) {
  cbs[i].addEventListener('change', function() {
    if (this.checked) {
      fontcolor[0].style.color = "#0099ff";
      fontcolor[1].style.color = "#0099ff";
      currentActive[0].style.color = "#0099ff";
    } else {
      fontcolor[0].style.color = "#FF8000";
      fontcolor[1].style.color = "#FF8000";
      currentActive[0].style.color = "#FFF";
    }
  });
};



var tab = document.getElementById('tabs');
var tabs = tab.getElementsByClassName('tab');
for (var i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', function() {
    var current = document.getElementsByClassName('active');
    current[0].className = current[0].className.replace(' active', "");
    this.className += " active";
  });
};
.color {
  color: #FF8000;
  font-weight: 700;
}

.tab.active,
.tab:active {
  color: #FF8000;
}

.blue {
  color: #0099FF;
}

.tab {
  background-color: #444;
  border: none;
  color: #FFF;
  padding: 12px 36px;
}
<p>Simple <span class="color">Text</span></p>

<div class="tabs" id="tabs">
  <button type="button" id="btn1" class="tab tab-library"><span class="icon icon-menu">Library</span></button>
  <button type="button" id="btn2" class="tab tab-home active"><span class="icon icon-home"></span>Home</button>
  <button type="button" id="btn3" class="tab tab-settings"><span class="icon icon-cog"></span>Settings</button>
</div>

<p><span class="color">Text</span> because Text is cool.</p>

<label class="color-switch"><input type="checkbox" id="check"/><span class="slider round"></span> Color Switch</label>

If possible no jQuery.




Aucun commentaire:

Enregistrer un commentaire