How to Add The Text "On" and "Off" to Toggle Button

how to add on off text to existing toggle switch

You can do it this way:

.cm-toggle {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    border: 0;
    outline: 0;
}
.cm-toggle:after {
    content: '';
    width: 35px;
    height: 20px;
    display: inline-block;
    background: rgba(196, 195, 195, 0.55);
    border-radius: 18px;
    clear: both;
}
.cm-toggle:before {
    content: 'off';
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    position: absolute;
    left: 0;
    top: 0px;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    transition: all 0.2s ease-in-out;
}
.cm-toggle:checked:before {
    left: 20px;
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6);
    content: 'on';
}

.cm-toggle:checked:after {
    background: #3895D3;
}

<input class='cm-toggle' type='checkbox' checked>

Insert text in toggle button html-css

.switch {  position: relative;  display: inline-block;  width: 180px;  height: 34px;}
 .slider {  position: absolute;  cursor: pointer;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: red;  -webkit-transition: .4s;  transition: .4s;}
.slider:before {  position: absolute;  content: "aaa";  height: 36px;  width: 60px;  left:0px;  bottom: -1px;  top: -1px;  background-color: black;  -webkit-transition: .4s;  transition: .4s;}

input:checked + .slider {  background-color: #2196F3;}

input:focus + .slider {  box-shadow: 0 0 1px #2196F3;}
input:checked + .slider:before {  -webkit-transform: translateX(120px);  -ms-transform: translateX(120px);  transform: translateX(120px);}
.text {  color: white;}
.text:after {  position: absolute;  top: 7px;  right: 25px;  content: "Switch off";  -webkit-transition: opacity 0.5s ease-in-out;  -moz-transition: opacity 0.5s ease-in-out;  transition: opacity 0.5s ease-in-out;}.text:before {  position: absolute;  top: 7px;  left: 25px;  content: "Switch on";  -webkit-transition: opacity 0.5s ease-in-out;  -moz-transition: opacity 0.5s ease-in-out;  transition: opacity 0.5s ease-in-out;}
input + .slider + .text:after {  opacity: 1;}input + .slider + .text:before {  opacity: 0;}

input:checked + .slider + .text:after {  opacity: 0;}
input:checked + .slider + .text:before {  opacity: 1;}

<!DOCTYPE html><html><head>    <title>check</title>    <link rel="stylesheet" type="text/css" href="main2.css"></head><body><label class="switch">  <input type="checkbox">  <div class="slider"></div>  <div class="text"></div></label></body></html>

Move text on toggle switch On/Off

I think you've picked up the above snippet from some other website, and hence, this is bad, cuz you are using it without understanding. Below is the altered working snippet of yours.

Explanation:
I've added .on and .off selectors to your CSS with altered positioning, to set your ON and OFF text properly. Secondly, I have changed the transform from 55px to transform: translateX(28px);. Your default circle was getting out of the element because the transform size was more than your toggle switch size.

Would recommend you to understand the code(even if you copy it) before you plug it into your system so at some point if you run into issues like this, you know what's happening.

.switch {  position: relative;  display: inline-block;  width: 45px;  height: 17px;}
.switch input {  display: none;}
.slider {  position: absolute;  cursor: pointer;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: #ca2222;  -webkit-transition: .4s;  transition: .4s;}
.slider:before {  position: absolute;  content: "";  height: 13px;  width: 13px;  left: 2px;  bottom: 2px;  background-color: white;  -webkit-transition: .4s;  transition: .4s;}
input:checked + .slider {  background-color: #2ab934;}
input:focus + .slider {  box-shadow: 0 0 1px #2196F3;}
input:checked + .slider:before {  -webkit-transform: translateX(28px);  -ms-transform: translateX(28px);  transform: translateX(28px);}

/*------ ADDED CSS ---------*/
.on {  display: none;}
.on,.off {  color: white;  position: absolute;  transform: translate(-50%, -50%);  top: 25%;  left: 25%;  font-size: 10px;  font-family: Verdana, sans-serif;}
.on {  top: 8px;}
.off {  left: auto;  right: -5px;  top: 8px;}
input:checked+ .slider .on {  display: block;}
input:checked + .slider .off {  display: none;}

/*--------- END --------*/

/* Rounded sliders */
.slider.round {  border-radius: 17px;}
.slider.round:before {  border-radius: 50%;}

<label class="switch">  <input type="checkbox" id="togBtn">  <div class="slider round">    <span class="on">ON</span>    <span class="off">OFF</span>  </div></label>

Add ON / OFF text to togglebutton

Check this answer out. The CSS ::before and ::after can help you.

Change the On/Off text of a toggle button Android

You can use the following to set the text from the code:

toggleButton.setText(textOff);
// Sets the text for when the button is first created.

toggleButton.setTextOff(textOff);
// Sets the text for when the button is not in the checked state.

toggleButton.setTextOn(textOn);
// Sets the text for when the button is in the checked state.

To set the text using xml, use the following:

android:textOff="The text for the button when it is not checked."
android:textOn="The text for the button when it is checked."

This information is from here

display text on toggle button

To achive desire result after edit, we are going to build something new.

HTML

<div class="switch">
  <input type="checkbox" name="switch" class="switch-checkbox" id="myswitch" checked>
  <label class="switch-labels" for="myswitch">
        <span class="switch-text"></span>
        <span class="switch-dot"></span>
    </label>
</div>

We will use a main div with class switch to build our switch. This will hold 2 things

The input so we can target it state and use both for styles and what i suppose future js styles
A label that will hold 2 things
2.1 The on and off text as before and after of a span
2.2 The white dot that slides on each state

CSS is commented on the snippet

Hope this is what you were looking for. Happy to explain or help in a better solution if needed.

body {  background-color: #ddd;}

/*Style main div and remove default checkbox*/
.switch {  position: relative;  width: 75px;  margin: 0 auto;}
.switch-checkbox {  display: none;}

/*Style words and oval switch */
.switch-labels {  display: block;  overflow: hidden;  cursor: pointer;  border-radius: 20px;}
.switch-text {  display: block;  width: 200%;  margin-left: -100%;  transition: margin 0.3s ease-in 0s;}
.switch-text:before,.switch-text:after {  float: left;  width: 50%;  line-height: 30px;  color: white;  box-sizing: border-box;}
.switch-text:before {  content: "ON";  padding-left: 10px;  background-color: #E1F6FF;  color: #000000;}
.switch-text:after {  content: "OFF";  padding-right: 10px;  background-color: #4D5585;  color: #FFFFFF;  text-align: right;}

/*Style center dot*/
.switch-dot {  width: 30px;  height: 30px;  background: #FFFFFF;  position: absolute;  top: 0;  bottom: 0;  right: 41px;  margin-right: 5px;  border-radius: 20px;  transition: all 0.3s ease-in 0s;}
.switch-dot:after{    content: "";    position: absolute;    width: 20px;    height: 20px;    background-size: cover;    background-image: url('http://www.free-icons-download.net/images/multiply-icon-27981.png');    margin: 5px 0 0 5px;}

/*State changer*/
.switch-checkbox:checked+.switch-labels .switch-text {  margin-left: 0;}
.switch-checkbox:checked+.switch-labels .switch-dot {  right: 0px;  margin-right: 0px;}

<div class="switch">  <input type="checkbox" name="switch" class="switch-checkbox" id="myswitch" checked>  <label class="switch-labels" for="myswitch">        <span class="switch-text"></span>        <span class="switch-dot"></span>    </label></div>

Toggle text in button onclick

The problem lies in how you are listening for the click events. Your toggleText function is triggered whenever you click the #readed button with the onclick attribute. But inside the toggleText function you add another event listener to the same button, adding a new event listener every time you click the button.

So every time you click the button you increment the amount of times you are calling toggleText.

Remove the onclick from the button and change the id to a class attribute. You said you would have multiple buttons, so having multiple buttons with the same id won't do it.

<button class="readed">READ</button>

Because you want to listen for the click event on dynamically created elements I suggest you use Event Delegation. This means listening for the click event on a parent element, this could be your table#shelf element, and check which element has been clicked. If A has been clicked, then do X, if B has been clicked, then do Y.

Listen for click event on your table element.

var table = document.getElementById('shelf');
table.addEventListener("click", tableClickHandler);

In tableClickHandler check which element has been clicked. You can do it by getting the clicked target and use the closest method to see if it really is the element you want to be clicked.

For example when you would have a <span> in your <button>, event.target would be <span>. But you want the <button> element. closest goes up in the DOM tree to see if it finally reaches an element that is the <button> you want and returns it.

You can do this for any button inside of your table.

function tableClickHandler(event) {
  var readed = event.target.closest('.readed');
  if (readed) {
    toggleText(readed);
  }
}

Modify your toggleText function so that it can take any <button> you throw add it that you want the text toggled in. Add a button parameter which represents the current button.

// Toggle text when clicked.
function toggleText(button) {
  if (button.innerHTML == "READ") {
      button.innerHTML = "NOT READ";
  } else if (button.innerHTML == "NOT READ") {
      button.innerHTML = "READ";
  } else {
      null
  }
}