I want to modify a url according to the click on the switch button (input checkbox).
I can not change the url on click as for the price. I would like that at the second click, the url (of the button) will return this initial value (url1).
The price is correct ... On click, change is good, but url is not good :/
Thank's for your help
function show() {
var x = document.getElementById("price");
if (x.innerHTML === "59€") {
x.innerHTML = "89€";
} else {
x.innerHTML = "59€";
}
var x = document.getElementById("url1").href;
if (x.href === "url1") {
document.getElementById("url1").href = "url2";
} else {
document.getElementById("url1").href = "url";
}
}
body{font-family:arial, 'sans serif';}
.btn{
background:#000;
padding:10px;
color:#fff;
text-decoration:none;
font-family:arial, 'sans serif';
margin:0 auto;
width:150px;
display:block;
text-align:center;
border-radius:10px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-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(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
h3{
text-align:center;
}
<p>Click here</p>
<label class="switch">
<input onclick="show()" type="checkbox">
<span class="slider round"></span>
</label>
<h3 class="price-presta" id="price">59€</h3>
<a class="btn" id="url1" href="url1">url link button</a>
<!-- url does not change on second click like the price -->
There are 2 problems. First, here:
var x = document.getElementById("url1").href;
if (x.href === "url1") {
You put the href into the x variable, but then you try to examine the x variable's href - but strings don't have a href property. Just examine the x itself instead.
Secondly, the .href property will return the full path of the link. For example, in the Stack Snippet, it returns https://stacksnippets.net/url1. Use getAttribute instead:
function show() {
const price = document.getElementById("price");
price.textContent = price.textContent === "59€" ? "89€" : "59€";
const anchor = document.getElementById("url1");
anchor.href = anchor.getAttribute('href') === 'url1' ? 'url2' : 'url';
}
body {
font-family: arial, 'sans serif';
}
.btn {
background: #000;
padding: 10px;
color: #fff;
text-decoration: none;
font-family: arial, 'sans serif';
margin: 0 auto;
width: 150px;
display: block;
text-align: center;
border-radius: 10px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-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(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
h3 {
text-align: center;
}
<p>Click here</p>
<label class="switch">
<input onclick="show()" type="checkbox">
<span class="slider round"></span>
</label>
<h3 class="price-presta" id="price">59€</h3>
<a class="btn" id="url1" href="url1">url link button</a>
<!-- url does not change on second click like the price -->
You already set the url to variable "x". So the if-condition has to be directly on the string and not the element:
//[...]
var x = document.getElementById("url1").href;
if (x === "url1") {
document.getElementById("url1").href = "url2";
}
//[...]
Perfect ! Thank you
Just ! : 'url' ? 'url2' : 'url'; VS 'url1' ? 'url2' : 'url'; :)
function show() {
const price = document.getElementById("price");
price.textContent = price.textContent === "59€" ? "89€" : "59€";
const anchor = document.getElementById("url1");
anchor.href = anchor.getAttribute('href') === 'url' ? 'url2' : 'url';
}
function show() {
const price = document.getElementById("price");
price.textContent = price.textContent === "59€" ? "89€" : "59€";
const anchor = document.getElementById("url1");
anchor.href = anchor.getAttribute('href') === 'url' ? 'url2' : 'url';
}
body {
font-family: arial, 'sans serif';
}
.btn {
background: #000;
padding: 10px;
color: #fff;
text-decoration: none;
font-family: arial, 'sans serif';
margin: 0 auto;
width: 150px;
display: block;
text-align: center;
border-radius: 10px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-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(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
h3 {
text-align: center;
}
<p>Click here</p>
<label class="switch">
<input onclick="show()" type="checkbox">
<span class="slider round"></span>
</label>
<h3 class="price-presta" id="price">59€</h3>
<a class="btn" id="url1" href="url1">url link button</a>
<!-- url does not change on second click like the price -->
Related
How can I create a toggle element without using pseduo ::before and ::after?
I want to create a toggle on an html page but without using the pseudo ::before and ::after.
I am currently using the method from w3Schools given here: https://www.w3schools.com/howto/howto_css_switch.asp
However, I don't want any ::before or ::after psuedo classes. I just want classes by alone, if possible. I tried rewriting my own class for this but didn't seem to work as intended.
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-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(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
I tried making a sliderbefore element myself without the psudeo and it didn't seem to work. (it was missing the small circle inside the toggle)
.sliderbefore {
border-radius: 34px;
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
box-shadow: 0 0 1px #2196F3;
}
With classList.toggle:
const a= document.getElementsByClassName('a');
const b= document.getElementsByClassName('b');
function changeColor(){
a[0].classList.toggle("d");
b[0].classList.toggle("e");
}
.a{
position: absolute;
border:1px solid red;
width: 500px;
height:300px;
background:green;
}
.b {
left:51px;
position: absolute;
top:2px;
float: right;
border-radius:50%;
width: 35px;
height:35px;
background: white;
transition: all 0.1s;
}
.c {
position: absolute;
top:40px;
left:130px;
border-radius:20px;
width: 90px;
height:40px;
background: #ced0d4;
}
.d{
background: blue;
}
.e{
left:4px;
}
<div class="a">
<div class="c" onclick="changeColor()">
<div class="b"></div>
</div>
</div>
I was able to create a toggle element by using javascript and html only instead of psuedo :before and :after
<html><head></head>
<script type="text/javascript">
function toggle(button) {
if (button.value == "OFF") {
button.value = "ON";
} else {
button.value = "OFF";
}
}
</script>
<body>
<form action="">
<input type="button" id="1" value="ON" style="color:blue"
onclick="toggle(this);">
</form></body></html>
The element is an input which has a Value of ON.
The Toggle function will switch the toggler on and off when clicked.
I have set up a switcher on my website to toggle between normal mouse / pointer & a Lego hand as a cursor and a head as pointer. However, I can only get the cursor to show when clicking the switcher. How can I also add this pointer
(cursor: url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/pointer.png?v=1644096049), pointer;)
It should be assigned to the following classes:
a, button, input, input, button, a, input, .slider, .round
I have then also added a snippet, which lets the switcher / checkbox stay on checked...
(You can see that on this video [password is 12345678]: https://easyupload.io/gknxoi)
However after a reload of the page for example, the switcher stays on checked, but the cursor doesn't show up...
var cbs = document.querySelectorAll('input[type=checkbox]');
for (var i = 0; i < cbs.length; i++) {
cbs[i].addEventListener('change', function() {
if (this.checked) {
document.body.style.cursor = "url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/cursor.png?v=1644096068), auto";
} else {
document.body.style.cursor = "default";
}
});
}
$(function() {
var test = localStorage.input === 'true' ? true : false;
$('input').prop('checked', test || false);
});
$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});
.switcheronheader {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
margin-bottom: 2px;
}
.mouseswitcher {
/* border-left: 1px solid #248751; */
padding-left: 20px;
}
.switcheronheader input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-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: #248751;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mouseswitcher">
<label class="switcheronheader">
<input type="checkbox" id="overheaderswitch">
<span class="slider round"></span>
</label>
</div>
Is this what you are looking for?
a, input, button, .slider, .round {
margin: 15px;
cursor:url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/pointer.png?v=1644096049), auto;
}
<input type="button" value="lego"/>
link to google.com
Use document.querySelector('html') instead of document.body will make it work.
Also, use cursor: auto instead of cursor: default
var cbs = document.querySelectorAll('input[type=checkbox]');
for (var i = 0; i < cbs.length; i++) {
cbs[i].addEventListener('change', function() {
if (this.checked) {
document.querySelector('html').style.cursor= ' url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/cursor.png?v=1644096068), auto'
document.querySelector('label').style.cursor = ' url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/cursor.png?v=1644096068), auto'
} else {
document.querySelector('html').style.cursor = "auto";
document.querySelector('label').style.cursor = 'auto'
}
});
}
.switcheronheader {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
margin-bottom: 2px;
}
.mouseswitcher {
/* border-left: 1px solid #248751; */
padding-left: 20px;
}
.switcheronheader input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-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: #248751;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mouseswitcher">
<label class="switcheronheader">
<input type="checkbox" id="overheaderswitch">
<span class="slider round"></span>
</label>
</div>
I have run into a roadblock trying to get this to work. I am attempting to create a switch that toggles an action on/off. For example, when a user toggles on the switch the switch will do Javascript action when it is on the on position and will turn off when the switch is toggled to the off position. That is ultimately my end goal with this. What can I do to make this work, I have been doing trial and error for the last maybe 10 daysish?? What can I say? I am determined. Here is the code, any help is appreciated! Thank you everyone. <3
<!DOCTYPE>
<html>
<body>
<label class = 'switch'>
<input type = 'checkbox' id = 'yet'>
<span class = 'slider'></span>
</label>
</body>
<style>
.switch {
display: inline-block;
position: absolute;
height: 30px;
width: 60px;
}
#yet{display: none;}
.slider {
top: 1px;
bottom: 0px;
left: 0px;
right: 0px;
position: absolute;
cursor: pointer;
background-color: #D00005;
-webkit-transition: .3s;
border-radius: 25px;
}
.slider:before {
cursor: pointer;
position: absolute;
height: 26px;
width: 26px;
bottom: 2px;
left: 4px;
border-radius: 100%;
content: "";
background-color: #000000;
-webkit-transition: .3s;
}
#yet:checked+.slider {
background-color: #16AA03;
}
#yet:checked+.slider:before {
-webkit-transform: translateX(26px);
}
</style>
<script>
function myBird() {
document.body.style.backgroundColor = '#000000';
}
function myRed() {
document.body.style.backgroundColor = '#FFFFFF';
}
</script>
</html>
Use an onClick event handler, checking the value of this.checked to know whether the input is checked or not.
HTML:
<input type = 'checkbox' id = 'yet' onclick='handleClick(this)'>
JavaScript:
function handleClick(cb) {
if (cb.checked) {
myBird();
} else {
myRed();
}
}
function myBird() {
document.body.style.backgroundColor = '#000000';
}
function myRed() {
document.body.style.backgroundColor = '#FFFFFF';
}
All together with CSS:
function handleClick(cb) {
if (cb.checked) {
myBird();
} else {
myRed();
}
}
function myBird() {
document.body.style.backgroundColor = '#000000';
}
function myRed() {
document.body.style.backgroundColor = '#FFFFFF';
}
.switch {
display: inline-block;
position: absolute;
height: 30px;
width: 60px;
}
#yet {
display: none;
}
.slider {
top: 1px;
bottom: 0px;
left: 0px;
right: 0px;
position: absolute;
cursor: pointer;
background-color: #D00005;
-webkit-transition: .3s;
border-radius: 25px;
}
.slider:before {
cursor: pointer;
position: absolute;
height: 26px;
width: 26px;
bottom: 2px;
left: 4px;
border-radius: 100%;
content: "";
background-color: #000000;
-webkit-transition: .3s;
}
#yet:checked+.slider {
background-color: #16AA03;
}
#yet:checked+.slider:before {
-webkit-transform: translateX(26px);
}
<label class = 'switch'>
<input type = 'checkbox' id = 'yet' onclick='handleClick(this)'>
<span class = 'slider'></span>
</label>
In the code below, I have coded a switch that disables and enables my links using CSS.
The problem is that my switch is not changing its appearance. It's doing its job (the JavaScript functionality is working), but the appearance isn't. I don't have much experience with
HTML Button:
<label class="switch" isValue="0">
<div class="slider round">
</div>
</label>
CSS:
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input[type="checkbox"]:checked + input[type="hidden"] + .slider,
input[type="checkbox"]:checked + .slider {
background-color: #2196F3;
}
input[type="checkbox"]:focus + input[type="hidden"] + .slider,
input[type="checkbox"]:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input[type="checkbox"]:checked + input[type="hidden"] + .slider:before,
input[type="checkbox"]:checked + .slider:before {
transform: translateX(26px);
}
Rounded sliders
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.dim.disabled {
pointer-events: none;
background-color: grey;
}
JavaScript:
$(document).on('click', '.switch', function () {
var v = $(".switch").attr("isValue");
if (v == 1) {
$(".switch").attr("isValue", "0");
$(".dim").removeClass("disabled");
}
else {
$(".switch").attr("isValue", "1");
$(".dim").addClass("disabled");
}
});
I know there is something wrong with this because it is of the input type checkbox.
Thank you for any help you can provide.
Okay, ignoring the proposed code that is too vague, here's how a jQuery class toggle works:
$(".switch").on('click', function () {
$(this)
.toggleClass('disabled')
.data('status', ($(this).hasClass("disabled")? '0':'1'));
console.clear();
console.log('data-status value is :', $(this).data('status') );
});
.switch > span {
display: block;
width: 68px;
height: 68px;
background-color: green;
border-radius: 34px;
}
.switch.disabled > span {
background-color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="switch" data-status="1"><span></span></div>
Using just CSS, incase you wanted to go that route. Figured it might be useful since you are saying the Javascript works but the appearance will not change.
Basic switch
/** Format Example Body **/
body {
margin: 0;
padding: 0;
background: #f0f0f0;
}
* {
box-sizing: border-box;
}
.container {
max-width: 500px;
margin: 0 auto;
background: #fff;
}
.components {
padding: 20px;
}
.components .content {
margin-bottom: 20px;
}
.default {
margin: 0 5px;
}
.switch {
display: inline-block;
}
.switch input {
display: none;
}
.switch small {
display: inline-block;
width: 100px;
height: 18px;
background: #3a3a3a;
border-radius: 5px;
position: relative;
cursor: pointer;
}
.switch small:after {
content: "No";
position: absolute;
color: #fff;
font-size: 11px;
font-weight: 600;
width: 100%;
text-align: right;
padding: 0 6px;
box-sizing: border-box;
line-height: 18px;
}
.switch small:before {
content: "";
position: absolute;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
top: 3px;
left: 3px;
transition: .3s;
box-shadow: -3px 0 3px rgba(0, 0, 0, 0.1);
}
.switch input:checked~small {
background: #3fc55c;
transition: .3s;
}
.switch input:checked~small:before {
transform: translate(25px, 0px);
transition: .3s;
}
.switch input:checked~small:after {
content: "Yes";
text-align: left;
}
<div class="container">
<div class="components">
<div class="content">
<label class="switch default">
<input type="checkbox">
<small></small>
</label>
</div>
</div>
</div>
I think you just need to have a specific name of a class for an enabled link or disabled link
style
.link_enabled {
/* style for enabled link */
}
.link_disabled {
/* style for disabled link */
}
script
$(document).on('click', '.switch', function () {
var v = $(".switch").attr("isValue");
if (v == 1) {
$(".switch").attr("isValue", "0");
$(".switch").removeClass("link_enabled").addClass("link_disabled");
$(".dim").removeClass("disabled");
}
else {
$(".switch").attr("isValue", "1");
$(".switch").removeClass("link_disabled").addClass("link_enabled");
$(".dim").addClass("disabled ");
}
});
For the record, please note that it is simpler in JS (es6).
And because the subject only mentions javascript (not jQuery) on tag list.
document.querySelector('.switch').onclick = function(e) {
this.dataset.status = this.classList.toggle('disabled')?'0':'1';
console.clear();
console.log('data-status value is :', this.dataset.status );
}
.switch>span {
display: block;
width: 68px;
height: 68px;
background-color: green;
border-radius: 34px;
}
.switch.disabled>span {
background-color: grey;
}
<div class="switch" data-status="1" ><span></span></div>
I'm trying to make a switch bar change between two sets of text. I've got the switch and the slider working but can't figure out how to attach the funciton to the slider.
I've made testing environment using W3School:
https://www.w3schools.com/code/tryit.asp?filename=FVEFVIB1J6D2
The switch code had the formatting correct but its not taking the formatting for the graphic.
function myFunction() {
var x = document.getElementById("myDIV");
if (x.innerHTML === "Longer text") {
x.innerHTML = "Shorter text";
} else {
x.innerHTML = "Longer text";
}
}
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #009bff;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
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(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<p>
<switch onclick="myFunction()">Choose your lenght </switch>
</p>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<div id="myDIV">Longer Story</div>
You just need to attach a listener to the input changes
HTMLInputElementObject.addEventListener('input', function (evt) {
myFunction();
});
assuming "input" as HTMLInputElementObject:
function myFunction() {
var x = document.getElementById("myDIV");
if (x.innerHTML === "Longer text") {
x.innerHTML = "Shorter text";
} else {
x.innerHTML = "Longer text";
}
}
document.getElementById("mySlider").addEventListener('input', function (evt) {
myFunction();
});
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #009bff;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
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(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;}
<label class="switch">
<input type="checkbox" id="mySlider">
<span class="slider round"></span>
</label>
<div id="myDIV">Longer text</div>
Your're almost finished. All you have to do is add an onClick callback to the span with the class slider round like this:
<label class="switch">
<input type="checkbox">
<span class="slider round" onclick='myFunction()'></span>
</label>
Your onclick needs to be on the input element or span element like so
<label class="switch">
<input type="checkbox" onclick="myFunction()">
<span class="slider round"></span>
</label>
I also cleaned up your code for you since your style tags was inside the body and you had extra body tags and your elements were outside the html tag for whatever reason.
https://www.w3schools.com/code/tryit.asp?filename=FVEGHO8VCQJA
You have to include the onclick to the checkbox with this as parameter.
<input type="checkbox" onclick='myFunction(this)'>
this is necessary to check if the checkbox is checked or not. If it is true than use the second text, otherwise use the first text.
Example for multiple usage
var text = {
1: ["Longer text", "Shorter text"],
2: ["Another longer text", "Another shorter text"]
// Add more
}
var output1 = document.getElementById("output");
var output2 = document.getElementById("output2");
function switchText(that, output, text) {
switch (that.checked) {
case true:
output.innerHTML = text[1];
break;
default:
output.innerHTML = text[0];
}
}
function switchFirstText(that) {
switchText(that, output1, text[1]);
}
function switchSecondText(that) {
switchText(that, output2, text[2]);
}
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #009bff;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
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(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<!-- First checkbox -->
<div>Choose your length</div>
<label class="switch">
<input onclick="switchFirstText(this)" type="checkbox">
<span class="slider round"></span>
</label>
<div id="output">Longer text</div>
<br>
<hr>
<br>
<!-- Second checkbox -->
<div>Choose your length 2</div>
<label class="switch">
<input onclick="switchSecondText(this)" type="checkbox">
<span class="slider round"></span>
</label>
<div id="output2">Another longer text</div>