I am trying to get the state of this switch for a chrome extension for learning the purpose, below is my sample code to just access the toggle switch onchange event and change the colour of some text.
Code is as follows:
document.addEventListener('DOMContentLoaded', function() {
var togBtn = document.getElementById('togBtn');
togBtn.addEventListener('onchange', function() {
document.getElementById("demo").style.color = "red";
});
});
<label class="switch">
<input type="checkbox" id="togBtn" value="false" name="disableYXLogo">
<span class="slider round"></span>
</label>
How can I get the state of the toggle switch and perform my required task?
Use following:
document.addEventListener('DOMContentLoaded', function() {
var togBtn = document.getElementById('togBtn');
togBtn.addEventListener('change', function() {
onChnage();
});
function onChnage() {
document.getElementById("demo").style.color = togBtn.checked ? "red" : "blue";
}
onChnage();
});
<label class="switch">
<input type="checkbox" id="togBtn" value="false" name="disableYXLogo">
<span class="slider round"></span>
</label>
<div id='demo'>I am the text of demo.</div>
Related
I am wondering how I can make a function execute such as making a text box appear when "Yes" option is clicked. How can I do this as the Yes is part of a radio input type in JS? I prefer an answer in vanilla javascript. It would help a lot! Thank You!
JavaScript
document.querySelector("label[for=ediet]").style.opacity = "100%"; //RIGHT
document.getElementById("edietq").style.opacity = "100%";
}
function init( ) {
var f = document.getElementsByName("form1");
f[0].addEventListener("submit", validateForm);
var yes = document.querySelector("label[for=ediet]");
yes.addEventListener("click", yesClicked);
var showT = document.getElementById("edietq");
showT.addEventListener("click", yesClicked);
}
window.onload = init; ```
**HTML**
<input type="radio" id="yes" name="option">
<label for="yes" id="yesq" value = "option">Yes</label><br><br>
<input type="radio" id="no" name="option">
<label for="No">No</label><br><br>
<label for="ediet">If yes, explain your dietary restrictions</label><br>
<input type="text" id="edietq" name="edietq"><br><br> <!-- Explain Diet-->
You can create a class that the display is none
.hide{
display: none
}
Leave pre added in the input to be hidden
<input type="text" id="edietText" class="hide" name="edietq">
And make a function that removes this class
const yesInput = document.getElementById("yes")
yesInput.addEventListener("click", yesClicked);
function yesClicked(){
let textExp = document.getElementById("edietText");
textExp.classList.remove('hide');
}
And you can do something like this too:
const yesInput = document.getElementById("yes");
const noInput = document.getElementById("no");
const textExp = document.getElementById("edietText");
yesInput.addEventListener("click", yesClicked);
noInput.addEventListener("click", noClicked);
function yesClicked(){
textExp.classList.remove('hide');
}
function noClicked(){
textExp.classList.add('hide');
}
const yesInput = document.getElementById("yes");
const noInput = document.getElementById("no");
const textExp = document.getElementById("edietText");
yesInput.addEventListener("click", yesClicked);
noInput.addEventListener("click", noClicked);
function yesClicked(){
textExp.classList.remove('hide');
}
function noClicked(){
textExp.classList.add('hide');
}
.hide{
display: none
}
<input type="radio" id="yes" name="option">
<label for="yes" id="yesq" value = "option">Yes</label>
<br><br>
<input type="radio" id="no" name="option">
<label for="no">No</label><br><br>
<label for="ediet">If yes, explain your dietary restrictions</label><br>
<input type="text" id="edietText" class="hide" name="edietq">
<br><br> <!-- Explain Diet-->
Use the onclick event listener as shown below:
document.getElementById("dark").addEventListener("click", (e) => {
console.log(e.target.id)
document.body.style.background = "black"
document.body.style.color = "white"
});
document.getElementById("light").addEventListener("click", (e) => {
console.log(e.target.id)
document.body.style.background = "white"
document.body.style.color = "black"
});
<label>Toggle Dark Mode</label>
<input type="radio" name="theme" id="dark" />
<label>Toggle Light Mode</label>
<input type="radio" name="theme" id="light" />
Adjust the code to suit your usecase.
Extremely new at Javascript and have been stuck on an if/else statement, because I don't know how to find the status of the Toggle switch I created.
if ( ? ? ? myToggle == "True" ? ? ? ) {
do this;
} else {
do this;
}
<label class="switch">
<input type="checkbox" id="myToggle">
<span class="slider round"></span>
</label>
I just want to find the status as to whether or not the toggle has been switched, and then build an if/else statement from there.
Create an EventListener on the checkbox in order to listen for new changes.
Under the EventListener, there'll be an if statement that checks for .checked attribute. If true, it'll print "Checked". If false, it'll print "Not checked".
Example:
var element = document.getElementById("myToggle");
element.addEventListener("change", function (event) {
if (event.target.checked) {
console.log("Checked");
} else {
console.log("Not checked");
}
});
<label class="switch">
<input type="checkbox" id="myToggle">
<span class="slider round"></span>
</label>
You can use the checked property to return the checked state of a checkbox.
if ( document.getElementById("myToggle").checked === true ) {
// do something
} else {
// do something else
}
Look at this :
https://www.w3schools.com/jsref/prop_checkbox_checked.asp
To get the checked status of input use elem.checked
Take a look at https://www.w3schools.com/jsref/prop_checkbox_checked.asp
if (document.getElementById('myToggle').checked) {
console.log('Toggle is checked')
} else {
console.log('Toggle is not checked')
}
if (document.getElementById('myToggle2').checked) {
console.log('Toggle 2 is checked')
} else {
console.log('Toggle 2 is not checked')
}
<label class="switch">
<input type="checkbox" id="myToggle">
<span class="slider round"></span>
</label>
<label class="switch">
<input type="checkbox" id="myToggle2" checked>
<span class="slider round"></span>
</label>
Since you are using a checkbox you can access its .checked property in javascript
first select your element
const element = document.querySelector(".input")
Secondly make a function to check the state
function checkState() {
const checked = element.checked;
if (checked) {
// do things here
} else { // do things here }
}
To check the state of the checkbox you can use the checked property
if (document.getElementById("myToggle").checked){
//do something
}else{
//do something else
}
See
https://www.w3schools.com/jsref/prop_checkbox_checked.asp
You can look for the checked attribute using the document interface and handle it with pure JS.
function isChecked(){
var c = document.getElementById('myToggle');
if (c.checked) {
console.log("checked");
} else {
console.log("not checked");
}
}
<label class="switch">
<input type="checkbox" id="myToggle">
<span class="slider round"></span>
<button onclick="isChecked()">Check and then click here</button>
</label>
I want to use 3 input checkbox to display 3 different div. I am using this code but the only one working is "Course 1" and I can't figure out why. I guess it is something pretty easy, but I can't see it:
document.getElementById('checkbox1');
checkbox1.onchange = function() {
if (checkbox1.checked) {
course1.style.display = 'block';
} else {
course1.style.display = 'none';
}
};
document.getElementById('checkbox2');
checkbox2.onchange = function() {
if (checkbox2.checked) {
course2.style.display = 'block';
} else {
course2.style.display = 'none';
}
};
document.getElementById('checkbox3');
checkbox3.onchange = function() {
if (checkbox3.checked) {
course3.style.display = 'block';
} else {
course3.style.display = 'none';
}
};
<form>
<label class="switch">
<input type="checkbox" id="checkbox1" checked="true"> Course 1
</label>
</form>
<form>
<label class="switch">
<input type="checkbox" id="checkbox2" checked="true"> Course 2
</label>
</form>
<form>
<label class="switch">
<input type="checkbox" id="checkbox3" checked="true"> Course 3
</label>
</form>
<br>
<div id="course1"> Text course 1
</div>
<br>
<div id="course2"> Text course 2
</div>
<br>
<div id="course2"> Text course 3
</div>
Example: https://codepen.io/antonioagar1/pen/dqGaoO
You can try this simple code instead of your own code:
document.addEventListener("change", function(ev){
if(ev.target.id.substr(0,8)=="checkbox") document.querySelector("[id='course"+ev.target.getAttribute("id").slice(-1)+"']").style.display=ev.target.checked?"block":"none";
});
you have two div with id course2. first, change it to course3 and then try.
Check result online
I'm trying the follow thing:
If I check radio button (id green) the div class "app-bar" should be replaced with the div class "app-bar green". I have tried with the following code, but somehow it doesnt works. Can someone help me?
JavaScript code:
var defaulttheme = document.getElementById("default");
var greentheme = document.getElementById("green");
if (defaulttheme.checked) {
document.getElementsByClassName("app-bar").className = "app-bar";
} else if (greentheme.checked) {
document.getElementsByClassName("app-bar").className = "app-bar green";
}
Code of the radio buttons:
<label class="switch">
<input type="radio" class="checkbox" name="portion_num" id="default" checked>
<span class="check"></span>
</label>
<label class="switch">
<input type="radio" class="checkbox" name="portion_num" id="green">
<span class="check"></span>
</label>
Image
I believed you want it to be like this? The className property is only available when you target a certain index of the returned array list of elements with class app-bar.
var defaulttheme = document.getElementById("default");
var greentheme = document.getElementById("green");
defaulttheme.addEventListener('change',update);
greentheme.addEventListener('change',update);
function update(){
if (defaulttheme.checked) {
document.getElementsByClassName("app-bar")[0].className = "app-bar";
} else if (greentheme.checked) {
document.getElementsByClassName("app-bar")[0].className = "app-bar green";
}
}
<label class="switch">
<input type="radio" class="checkbox" name="portion_num" id="default" checked>
<span class="check"></span>
</label>
<label class="switch">
<input type="radio" class="checkbox" name="portion_num" id="green">
<span class="check"></span>
</label>
<div class="app-bar">test</div>
To get the element by JavaScript, you have two ways:
element = document.getElementByClassName("app-bar");
Or I prefer this way:
element = document.querySelector(".app-bar");
Then, you don't change "app-bar" into "app-bar green", but you add the class "green". You can do this by this code:
element.classList.add("green").
So, we can have this code:
var defaulttheme = document.getElementById("default");
var greentheme = document.getElementById("green");
if (greentheme.checked) {
document.querySelector(".app-bar").classList.add("green");
}
<label class="switch">
<input type="radio" class="checkbox" name="portion_num" id="default" checked>
<span class="check"></span>
</label>
<label class="switch">
<input type="radio" class="checkbox" name="portion_num" id="green">
<span class="check"></span>
</label>
You can use querySelector for your example which returns the first matched element element within the document and then you can use Element.className property on the that element to set the class attribute.
document.getElementsByClassName() returns a live HTMLCollection of found elements and you will have to use index/loop to first get the element and then use Element.className property to set the class attribute.
var defaulttheme = document.getElementById("default");
var greentheme = document.getElementById("green");
defaulttheme.addEventListener("click", themeChange);
greentheme.addEventListener("click", themeChange);
function themeChange() {
if (defaulttheme.checked) {
document.querySelector(".app-bar").className = "app-bar";
} else if (greentheme.checked) {
document.querySelector(".app-bar").className = "app-bar green";
}
}
div.app-bar {
height: 50px;
background: grey;
}
div.app-bar.green {
height: 50px;
background: green;
}
<div class="app-bar">
</div>
<label class="switch">
<input type="radio" class="checkbox" name="portion_num" id="default" checked>
<span class="check"></span>
</label>
<label class="switch">
<input type="radio" class="checkbox" name="portion_num" id="green" >
<span class="check"></span>
</label>
I am new to OO JavaScript, and have tried writing a plugin which allows me so create multiple instances of "pretty selects" which can have custom html formatted within...
the issue im having is that when i add multiple instances on the page, one returns undefined or odd values....
Here is my JS
function selectify(options) {
var $elem = $(options.target),
$button = $elem.find('button');
open = false;
function getVal() {
return $elem.find('input:checked').val();
}
function setVal(val) {
$elem.find('.active').removeClass('active');
$elem.find('input[value="' + val + '"]').attr('checked','checked').parent().addClass('active');
}
function toggle() {
if(open) {
open = false;
$elem.removeClass('open');
$button.attr('aria-pressed','false');
} else {
open = true;
//$elem.find('.active input').focus();
$elem.addClass('open');
$button.attr('aria-pressed','true');
}
}
$button.attr('aria-pressed','false');
$elem.find('input:checked').parent().addClass('active')
$elem.find('label').click(function() {
setVal($(this).find('input').val());
if(open) toggle();
});
$button.click(function() {
toggle();
})
$(window).on('keydown', function(e) {
if(open) {
switch(e.keyCode) {
case 40:
//down
if(!$elem.find('.active').is('label:last-child')) setVal($elem.find('.active').next('label').find('input').val());
break;
case 38:
//up
if($elem.find('.active').index()>1) setVal($elem.find('.active').prev('label').find('input').val());
break;
case 27:
toggle();
break;
}
}
})
return {
getVal: getVal,
setVal: setVal,
open: open,
toggle: toggle
}
}
var x = new selectify({
target:'.target2'
});
var y = new selectify({
target:'.target'
});
and this is the html
<fieldset class="selectify target">
<button aria-label="open select">▼</button>
<!--legend>Donut Type</legend-->
<label>
<input type="radio" value="1" name="flavour" />
Red
</label>
<label>
<input type="radio" value="2" name="flavour" checked="checked" />
Blue
</label>
<label>
<input type="radio" value="3" name="flavour" />
Green
</label>
<label>
<input type="radio" value="4" name="flavour" />
Yellow
</label>
<label>
<input type="radio" value="5" name="flavour" />
Cat
</label>
</fieldset>
I have a working example on CodePen if that helps?
http://codepen.io/ben-walters/pen/fbIya
Thanks in advance guys and girls!