[user2487833]

I have created a toggle switch using css.

I want #box1 to turn from a white background with black type to a black with white text and the toggle to turn to on.

I’m stuck trying to figure out the JavaScript. The button doesn’t switch and the box doesn’t turn back to white.

$('#myonoffswitch').change(function(){   
    console.log('here');
    if ($(this).click())
    {
        $('#box1').addClass('dark-mode');
    }
    else
    {
        $('#box1').removeClass('dark-mode');
    }
});

How can toggle the dark-mode class.

Fiddle

[robbmj]

You can just use the toggleClass method. Demo

$('#myonoffswitch').change(function(){   
    $('#box1').toggleClass('dark-mode');    
});

$(this).click() returns an instance of jQuery, which is a truthy value in JavaScript, this is why addClass was called in the first place

$('#myonoffswitch').change(function() {
  $('#box1').toggleClass('dark-mode');
});

.onoffswitch {
  position: relative;
  width: 90px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.onoffswitch-checkbox {
  display: none;
}
.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #999999;
  border-radius: 20px;
}
.onoffswitch-inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  -moz-transition: margin 0.3s ease-in 0s;
  -webkit-transition: margin 0.3s ease-in 0s;
  -o-transition: margin 0.3s ease-in 0s;
  transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
  display: block;
  float: left;
  width: 50%;
  height: 30px;
  padding: 0;
  line-height: 30px;
  font-size: 14px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.onoffswitch-inner:before {
  content: "ON";
  padding-left: 10px;
  background-color: #FFFFFF;
  color: #000000;
}
.onoffswitch-inner:after {
  content: "OFF";
  padding-right: 10px;
  background-color: #FFFFFF;
  color: #000000;
  text-align: right;
}
.onoffswitch-switch {
  display: block;
  width: 18px;
  margin: 6px;
  background: #000000;
  border: 2px solid #999999;
  border-radius: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 56px;
  -moz-transition: all 0.3s ease-in 0s;
  -webkit-transition: all 0.3s ease-in 0s;
  -o-transition: all 0.3s ease-in 0s;
  transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
  right: 0px;
  background-color: #FFFFFF;
}
#box1 {
  color: black;
  background-color: white;
  border: 1px solid;
  width: 100px;
  height: 100px;
}
#box1.dark-mode {
  color: #fff;
  background-color: #000;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="onoffswitch">
  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
  <label class="onoffswitch-label" for="myonoffswitch">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
  </label>
</div>
<br>
<div id="box1">This is text.</div>

[Author]

Posts