Change font color if checkbox is checked

Question

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.

Answer 1

Rather than hard-coding the style changes, the easiest way might be to create and toggle classes themselves. I've created a few more styles: .orange and .active-blue, and I've removed all references to CSS styles directly. Now, rather than toggling colors, I'm simply toggling orange and blue styles. In the case of the buttons, I'm toggling the activeClass (between 'active' and 'active-blue'), and I've saved that as a variable I can use in the buttons' click handler.

Hope this helps!

 var fontcolor = document.getElementsByClassName('color'); var cbs = document.querySelectorAll('input[type=checkbox]'); var activeClass = "active"; for (var i = 0; i < cbs.length; i++) { cbs[i].addEventListener('change', function() { var currentActive = document.getElementsByClassName(activeClass)[0]; if (this.checked) { fontcolor[0].classList.remove("orange"); fontcolor[1].classList.remove("orange"); currentActive.classList.remove("active"); fontcolor[0].classList.add("blue"); fontcolor[1].classList.add("blue"); currentActive.classList.add("active-blue"); activeClass = "active-blue"; } else { fontcolor[0].classList.add("orange"); fontcolor[1].classList.add("orange"); currentActive.classList.add("active"); fontcolor[0].classList.remove("blue"); fontcolor[1].classList.remove("blue"); currentActive.classList.remove("active-blue"); activeClass = "active"; } }); }; 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(activeClass); current[0].classList.remove(activeClass); this.classList.add(activeClass); }); }; 

 .color { font-weight: 700; } .orange { color: #FF8000; } .blue { color: #0099FF; } .tab.active-blue { color: #0099FF; } .tab.active, .tab:active { color: #FF8000; } .tab { background-color: #444; border: none; color: #FFF; padding: 12px 36px; } 

 <p>Simple <span class="color orange">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">Home</span> </button> <button type="button" id="btn3" class="tab tab-settings"> <span class="icon icon-cog">Settings</span> </button> </div> <p><span class="color orange">Text</span> because Text is cool.</p> <label class="color-switch"><input type="checkbox" id="check"/><span class="slider round"></span> Color Switch</label> 

Answer 2

You can try alternative way. You should keep all content under the parent div Then just add css class for switch color. So HTML Like below

HTML

<div id="switchColor"><!--parent div-->
<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>
</div>

CSS

.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;
}

.changeColor .tabs .active, 
.changeColor .color{
    color: #0099FF;
}

Javascript

var fontcolor = document.getElementsByClassName('color');
var currentActive = document.getElementsByClassName('active');
var parentDiv = document.getElementById('switchColor');

document.getElementById('check').addEventListener('change', function() {
    if (this.checked) {
     parentDiv.classList.add('changeColor');
    } else {
      parentDiv.classList.remove('changeColor')
    }
  });



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";
  });
};

See the Pen Color Change Javascript by Ripon ( @flex4web ) on CodePen .

Answer 3

You can use javascript and event listeners to do something like this.

 var activeBtn = document.getElementById('btn2'); var altColor = false; document.getElementById('check').addEventListener('change', function() { altColor = this.checked; activeBtn.style.color = altColor ? 'green' : 'orange'; }); function toggleStyles() { activeBtn = this; var btns = document.getElementById('tabs').children; var i; for (i = 0; i < btns.length; i++) { if (btns[i].id == activeBtn.id) { btns[i].style.color = altColor ? 'green' : 'orange'; } else { btns[i].style.color = 'white'; } } } document.getElementById('btn1').addEventListener('click', toggleStyles); document.getElementById('btn2').addEventListener('click', toggleStyles); document.getElementById('btn3').addEventListener('click', toggleStyles); 

 .color { font-weight: 700; } .orange { color: #FF8000; } .blue { color: #0099FF; } .tab.active-blue { color: #0099FF; } .tab.active, .tab:active { color: #FF8000; } .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>