在切换开关内添加开/关文本

Question

As the question suggests, I want to add 'On' or 'Off' text inside the toggle switch depending on the switch state using js only. There are few examples in this topic, but unable to grip. The MWE is presented below:

 window.addEventListener('DOMContentLoaded', function() { var swPos = [Math.random() >= 0.5]; var swConnection = ["a0"]; switchPosition(swPos, swConnection); var togglebtns = document.getElementsByClassName('togglebtn'); for (var i = 0; i < togglebtns.length; i++) { togglebtns[i].addEventListener('click', function() { changingPin = Number(this.id.substr(2)); swPos[changingPin] = !swPos[changingPin]; drawSwitch(this.id.substr(2), swPos[changingPin]); }); } }, false); function switchPosition(swPos, swConnection) { for (i = 0; i < swConnection.length; i++) { drawSwitch(pad(i, 2), swPos[i]); } } function drawSwitch(pinNoStr, state) { var btnWrapper = document.getElementById('tb' + pinNoStr); var btn = document.getElementById('mt' + pinNoStr); if (state == true) { btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2) + 'px'; btnWrapper.style.background = '#7bc77b'; btnWrapper.style.border = '1px solid #7bc77b'; document.getElementById('l' + pinNoStr).style.cssText = 'background: #b9f3fe;\\ background: gradient-gradient(#ffffff, #77a1b9);\\ box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);' } else { btn.style.left = '0px'; btnWrapper.style.background = 'lightgrey'; btnWrapper.style.border = '1px solid lightgrey'; document.getElementById('l' + pinNoStr).style.cssText = 'background: #283446;\\ background: gradient-gradient(#36455b, #283446);\\ box-shadow: inset 0 1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(185,231,253,0), inset 0 0 8px rgba(0,0,0,0.9), inset 0 -2px 5px rgba(0,0,0,0.3), inset 0 -5px 5px rgba(0,0,0,0.5);' } } function pad(n, width, z) { z = z || '0'; n = n + ''; return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n; } 

 * { margin: 0; padding: 0; } .dc { margin: 10px 50px 10px 50px; padding: 10px 10px 10px 10px; background: rgb(183, 154, 216); } .tbanimate { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .togglebtn { width: 75px; height: 33px; float: left; background: lightgray; border-radius: 9999px; border: 2px solid lightgray; } .mainToggle { width: 33px; height: 33px; background: whitesmoke; border-radius: 9999px; position: relative; left: 0; } .light { content: ""; display: inline-block; width: 18px; height: 18px; margin: 10px; border-radius: 9999px; -webkit-transition: all .5s ease; transition: all .5s ease; z-index: 2; } 

 <section class="dc" id="00"> <div> <div class="togglebtn tbanimate" id="tb00"> <div class="mainToggle tbanimate" id="mt00"></div> </div> <div class="light" id="l00"></div> </div> </section> 

Extra: Is this possible to make a draggable switch. Currently, only click can change state. It would be nice if I can drag the circle from one side to another. Pure JS, CSS.

Answer 1

You change the textContent of the #mt00 div based on the value of the boolean inside swPos .

 * { margin: 0; padding: 0; } .dc { margin: 10px 50px 10px 50px; padding: 10px 10px 10px 10px; background: rgb(183, 154, 216); } .tbanimate { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .togglebtn { width: 75px; height: 33px; float: left; background: lightgray; border-radius: 9999px; border: 2px solid lightgray; } .mainToggle { width: 33px; height: 33px; background: whitesmoke; border-radius: 9999px; position: relative; left: 0; } .light { content: ""; display: inline-block; width: 18px; height: 18px; margin: 10px; border-radius: 9999px; -webkit-transition: all .5s ease; transition: all .5s ease; z-index: 2; } #mt00{ vertical-align: middle; display: table-cell; } 

 <section class="dc" id="00"> <div> <div class="togglebtn tbanimate" id="tb00"> <div class="mainToggle tbanimate" id="mt00"></div> </div> <div class="light" id="l00"></div> </div> <span id="result"></span> </section> <script> window.addEventListener('DOMContentLoaded', function() { var swPos = [Math.random() >= 0.5]; var swConnection = ["a0"]; var mtoo = document.getElementById('mt00'); if(swPos[0]){ mtoo.innerHTML = "On"; } else { mtoo.innerHTML= "Off"; } switchPosition(swPos, swConnection); var togglebtns = document.getElementsByClassName('togglebtn'); for (var i = 0; i < togglebtns.length; i++) { togglebtns[i].addEventListener('click', function() { changingPin = Number(this.id.substr(2)); swPos[changingPin] = !swPos[changingPin]; if(swPos[changingPin]){ mtoo.innerHTML = "On"; } else { mtoo.innerHTML = "Off"; } drawSwitch(this.id.substr(2), swPos[changingPin]); }); } }, false); function switchPosition(swPos, swConnection) { for (i = 0; i < swConnection.length; i++) { drawSwitch(pad(i, 2), swPos[i]); } } function drawSwitch(pinNoStr, state) { var btnWrapper = document.getElementById('tb' + pinNoStr); var btn = document.getElementById('mt' + pinNoStr); if (state == true) { btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2) + 'px'; btnWrapper.style.background = '#7bc77b'; btnWrapper.style.border = '1px solid #7bc77b'; document.getElementById('l' + pinNoStr).style.cssText = 'background: #b9f3fe;\\ background: gradient-gradient(#ffffff, #77a1b9);\\ box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);' } else { btn.style.left = '0px'; btnWrapper.style.background = 'lightgrey'; btnWrapper.style.border = '1px solid lightgrey'; document.getElementById('l' + pinNoStr).style.cssText = 'background: #283446;\\ background: gradient-gradient(#36455b, #283446);\\ box-shadow: inset 0 1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(185,231,253,0), inset 0 0 8px rgba(0,0,0,0.9), inset 0 -2px 5px rgba(0,0,0,0.3), inset 0 -5px 5px rgba(0,0,0,0.5);' } } function pad(n, width, z) { z = z || '0'; n = n + ''; return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n; } </script> 

Answer 2

I have managed to do with pseudo elemets :after and :before You need to give relative position to the parent, and absolute position to the :after and :before.

 (()=>{ var swPos = [Math.random() >= 0.5]; var swConnection = ["a0"]; if(swPos[0]){ document.getElementById("tb00").classList.add("on-text"); document.getElementById("tb00").classList.remove("off-text"); } else { document.getElementById("tb00").classList.add("off-text"); document.getElementById("tb00").classList.remove("on-text"); } switchPosition(swPos, swConnection); var togglebtns = document.getElementsByClassName('togglebtn'); for (var i = 0; i < togglebtns.length; i++) { togglebtns[i].addEventListener('click', function() { changingPin = Number(this.id.substr(2)); swPos[changingPin] = !swPos[changingPin]; if(swPos[changingPin]){ document.getElementById("tb00").classList.add("on-text"); document.getElementById("tb00").classList.remove("off-text"); } else { document.getElementById("tb00").classList.add("off-text"); document.getElementById("tb00").classList.remove("on-text"); } drawSwitch(this.id.substr(2), swPos[changingPin]); }); } })(); function switchPosition(swPos, swConnection) { for (i = 0; i < swConnection.length; i++) { drawSwitch(pad(i, 2), swPos[i]); } } function drawSwitch(pinNoStr, state) { var btnWrapper = document.getElementById('tb' + pinNoStr); var btn = document.getElementById('mt' + pinNoStr); if (state == true) { btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2) + 'px'; btnWrapper.style.background = '#7bc77b'; btnWrapper.style.border = '1px solid #7bc77b'; document.getElementById('l' + pinNoStr).style.cssText = 'background: #b9f3fe;\\ background: gradient-gradient(#ffffff, #77a1b9);\\ box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);' } else { btn.style.left = '0px'; btnWrapper.style.background = 'lightgrey'; btnWrapper.style.border = '1px solid lightgrey'; document.getElementById('l' + pinNoStr).style.cssText = 'background: #283446;\\ background: gradient-gradient(#36455b, #283446);\\ box-shadow: inset 0 1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(185,231,253,0), inset 0 0 8px rgba(0,0,0,0.9), inset 0 -2px 5px rgba(0,0,0,0.3), inset 0 -5px 5px rgba(0,0,0,0.5);' } } function pad(n, width, z) { z = z || '0'; n = n + ''; return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n; } 

 * { margin: 0; padding: 0; } .dc { margin: 10px 50px 10px 50px; padding: 10px 10px 10px 10px; background: rgb(183, 154, 216); } .tbanimate { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .togglebtn { width: 75px; height: 33px; float: left; background: lightgray; border-radius: 9999px; border: 2px solid lightgray; position: relative; } .on-text:before { content: 'On'; position: absolute; top: 8px; left: 8px; } .off-text:after { content: 'Off'; position: absolute; top: 8px; right: 8px; } .mainToggle { width: 33px; height: 33px; background: whitesmoke; border-radius: 9999px; position: relative; left: 0; } .light { content: ""; display: inline-block; width: 18px; height: 18px; margin: 10px; border-radius: 9999px; -webkit-transition: all .5s ease; transition: all .5s ease; z-index: 2; } 

 <section class="dc" id="00"> <div> <div class="togglebtn tbanimate off-text" id="tb00"> <div class="mainToggle tbanimate" id="mt00"></div> </div> <div class="light" id="l00"></div> </div> </section>