How to execute or stop a function on toggle switch using plain javascript?
In this solution, if the translation checkbox
is clicked, the translateBlock()
method is called and the text inside the <textarea>
element is changed according to the logic.
/* A let variable is declared, not a const, to change the content. */
let checkBox = document.getElementById('checkbox');
let input = document.getElementById('input');
function transRussian(ch){
ch = ch.replace(/l/g, "л");
ch = ch.replace(/p/g, "п");
return ch;
}
function translateBlock(){
var ch = input.value;
input.value = transRussian(ch);
}
/* When the checkbox is clicked, the control variable is set to true. */
input.addEventListener('keyup', () => {
if(checkBox.checked)
translateBlock();
});
/* This method is triggered when data is entered in the <textarea> element. */
checkBox.addEventListener('change', () => {
if(checkBox.checked)
translateBlock();
else
console.log("transliteration is turned off")
});
textarea{
display: block;
}
<span>Translate</span>
<input type="checkbox" id="checkbox"/>
<textarea id="input" name="w3review" rows="4" cols="50">
At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
</textarea>