Develop Reference

JavaScript Obtain value from Given switch and write it to some file online

The Complete Code is shown below.
I would like to get the value of Switch and write it in some .txt file online and everytime when I'm opening this webpage,It should fetch the value from that .txt file online and update the switch accordingly.Is there any way to do it
I am a Newbie to JavaScript and all my Experience is in Python Programming.Therefore I am asking this question in a perspective of python (Python Files,Web Scraping,etc.)
Is JavaScript Capable enough of fetching some data from a file online and updating it Synchronously ?
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch 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: 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%;
}
<h2>Dark and Day Mode</h2>
<label class="switch">
<input type="checkbox" checked />
<span class="slider round"></span>
</label>

Like this for JS part:
let isChecked = document.querySelector("#switch");
isChecked.addEventListener('click', function() {
console.log(isChecked.checked)
})
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch 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: 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%;
}
<h2>Dark and Day Mode</h2>
<label class="switch">
<input id="switch" type="checkbox" checked />
<span class="slider round"></span>
</label>

Switch Toggle function on click by Class in JavaScript

Here is a Switch Toggle which can change the width of a div with ID "abc" and it works fine
document.getElementById("toggleSwitch").onclick = function() {
myFunction()
};
function myFunction() {
let width = document.getElementById("abc").style.width;
if (width === '400px') {
document.getElementById("abc").style.width = "200px";
} else {
document.getElementById("abc").style.width = "400px";
}
}
.switch {
position: relative;
display: inline-block;
width: 31px;
height: 19px;
margin: 0 20px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(220 220 220);
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: -10px;
bottom: -2px;
background-color: #f3f3f3;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 37%);
}
input:checked+.slider {
background-color: #1967d263;
}
input:checked+.slider:before {
background-color: #1967d2;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
#abc{
width: 200px;
height:200px;
background: blue;
transition: width 1s;
}
<label class="switch">
<input id="toggleSwitch" type="checkbox">
<span class="slider"></span>
</label><br>
<div id="abc">
</div>
but I want to use Class Name instead of ID but when I change document.getElementById() with getElementsByClassName() and change the ID of div into class Name it stop working.
How can I use here getElementsByClassName()

You could do with classList.toggle. For default you should add 200 small with class to element then toggle with bigWidth(400) Class
Don't add the width for id. Because id more specific then class. i had removed the width inside the id. And added smallWidth class
Updated
you can do with document.querySelectorAll
document.getElementById("toggleSwitch").onclick = function() {
myFunction()
};
function myFunction() {
Array.from(document.querySelectorAll(".smallWidth"))
.forEach(a => {
a.classList.toggle('bigWidth')
})
}
.switch {
position: relative;
display: inline-block;
width: 31px;
height: 19px;
margin: 0 20px;
}
.switch input {
display: none;
}
.smallWidth {
width: 200px;
}
.bigWidth {
width: 400px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(220 220 220);
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: -10px;
bottom: -2px;
background-color: #f3f3f3;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 37%);
}
input:checked+.slider {
background-color: #1967d263;
}
input:checked+.slider:before {
background-color: #1967d2;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
#abc {
height: 20px;
background: blue;
transition: width 1s;
margin:10px;
}
<label class="switch">
<input id="toggleSwitch" type="checkbox">
<span class="slider"></span>
</label><br>
<div id="abc" class="smallWidth">
</div>
<div id="abc" class="smallWidth">
</div>
<div id="abc" class="smallWidth">
</div>

[...document.getElementsByClassName("toggleSwitch")]
.forEach(el => el.onclick = () => {
let width = document.getElementById("abc").style.width;
if (width === '400px') {
document.getElementById("abc").style.width = "200px";
} else {
document.getElementById("abc").style.width = "400px";
}
})
.switch {
position: relative;
display: inline-block;
width: 31px;
height: 19px;
margin: 0 20px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(220 220 220);
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: -10px;
bottom: -2px;
background-color: #f3f3f3;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 37%);
}
input:checked+.slider {
background-color: #1967d263;
}
input:checked+.slider:before {
background-color: #1967d2;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
#abc{
width: 200px;
height:200px;
background: blue;
transition: width 1s;
}
<label class="switch">
<input class="toggleSwitch" type="checkbox">
<span class="slider"></span>
</label><br>
<div id="abc">
</div>

getElementsByClassName returns an array, so you will have to apply the same function to every element. Then, the function also needs to update every element, you can use the same logic for that:
var elements =
document.getElementsByClassName("toggleSwitch").forEach(element => {
element.onclick = myFunction;
})
function myFunction() {
document.getElementsByClassName("abc").forEach(element => {
let width = element.style.width;
if (width === '400px') {
element.style.width = "200px";
} else {
element.style.width = "400px";
}
})
}

change main wrapper background color with CSS button

I want to change background color of main wrapper using the background-color attribute via CSS button
My class is <div class='mainWrapper fullWidth'> the CSS for the class is .mainWrapper
Below is the CSS for the button I found it at https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch 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: 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%;
}
</style>
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</body>
</html>
I tried the following
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch 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: 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%;
}
</style>
</head>
<body>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<style>
body {
background: grey;
}
</style>
<script>
function colorize(light) {
if (light) {
document.body.style.background = 'grey';
}
else {
document.body.style.background = 'blue';
}
}
</script>
<body>
<div id="switch">
<button id="slider round" onclick="colorize(true)"></button>
<div id="slider">
<button onclick="colorize(false)"></button>
</div>
</div>
</body>

Do you want to change the background color with the toggle switch?
If so you can add an event listener to the checkbox and change the background of your wrapper div/class using javascript or jQuery.
Here is an example of it.
https://jsfiddle.net/ba513j27/
<div id="wrapper">
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox" checked id="tog-bg">
<span class="slider round"></span>
</label>
</div>
<script>
document.getElementById("tog-bg").addEventListener('change', function(){
if(document.getElementById("tog-bg").checked) {
document.getElementById("wrapper").style.backgroundColor = "white";
} else {
document.getElementById("wrapper").style.backgroundColor = "green";
}
});
</script>

Select DOM elements using the class name, then add any color that you want
document.getElementsByClassName("mainWrapper").style.backgroundColor = "Color Name";

How to create and read values from a button slider?

I am trying to read a true/false value from a button slider. Here are my codes
<select name="slide-1" id="slide-1">
<option value="true">On</option>
<option value="false">Off</option>
</select>
<input type ="button" value="submit" id="btnSubmit" />
<script>
$('#btnSubmit').on('click', function () {
var $optionElement = $('#slide-1').val();
alert($optionElement);
});
</script>
I was able to read the values. However, I would like to transform the element
into a slider and at the same time still be able to read the values out of it
This is my desired slider button that I would like to achieve

I suggest trying to do this in css with a checkbox html element. Here you can find an easy implementation of how to do this with css. It might suit your needs.
Html:
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
Css:
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* 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%;
}

Toggle function fires twice on transitionend

I have a toggle whose checked status I am calling with jQuery. Every time I click the toggle from unchecked to checked, the console logs "do this!" twice. Why does this function fire twice and what is the workaround to get it to fire once?
$("#my-toggle").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
if (document.getElementById('my-checkbox').checked) {
console.log("do this!")
}
});
.switch {
position: absolute;
top: 15%;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before,
.slider .number {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.slider .number {
background: none;
font-size: 14px;
left: 9px;
top: 9px;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before,
input:checked+.slider .number {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="my-checkbox">
<span class="slider round" id="my-toggle"></span>
</label>
My final HTML looks like this, for which the event fires three times:
<label class="switch">
<input type="checkbox" id="my-checkbox">
<span class="slider round" id="my-toggle">
<span class="number">00</span>
</span>
</label>

There are two transitionend events firing: one from your #my-toggle <span>, one from your ::before pseudo element. You need to differentiate those two events. You’d need the event argument e for that.
The only difference is then found in e.originalEvent.propertyName (for the corresponding CSS property) and e.originalEvent.pseudoElement.
So let’s check for that last property in the if condition.
Also put another && e.target == this in there, since the transitionend event is also firing for children because the event bubbles up. Since you’re only listening to the event on the parent <span>, you can’t simply call e.stopPropagation which would only be useful to prevent the parent(s) from firing the event.
$("#my-toggle").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e) {
if (document.getElementById("my-checkbox").checked && !e.originalEvent.pseudoElement && e.target == this) {
console.log("do this!");
}
});
.switch {
position: absolute;
top: 15%;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before,
.slider .number {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.slider .number {
background: none;
font-size: 14px;
left: 9px;
top: 9px;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before,
input:checked + .slider .number {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id = "my-checkbox">
<span class="slider round" id = "my-toggle">
<span class="number">00</span>
</span>
</label>

This comes from the elements that are concerned by the transition.
If you put a console.log(event) (with putting it as a argument of your event handler), you will see that the concerned properties are background-color and trandform.
These 2 properties are concerned by the transition, so your event hendler is called once per property.
Here is the snippet with "filtering" on transform property:
$("#my-toggle").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(event){
if (event.originalEvent.propertyName === "transform" && document.getElementById('my-checkbox').checked){
console.log("do this!");
}
});
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.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%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="my-checkbox">
<span class="slider round" id="my-toggle"></span>
</label>

Use .slider instead of .switch when looking for the click function, this worked for me and I don't know why.
$('.slider').on('click',function(){
alert("Test");
});