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 which'll check 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>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 }
}