如何使用普通 javascript 在拨动开关上执行或停止功能？

Question

所以我有这个音译功能，如果复选框被选中，我需要执行它。问题是，该功能在取消选中复选框后继续运行。

const checkBox = document.querySelector("#checkbox");
const input = document.querySelector("#input");

function transRussian(){
  ch = ch.replace(/l/g, "л");
  ch = ch.replace(/p/g, "п");
  return ch;
}

checkBox.addEventListener('change',()=>{
  if(checkBox.checked){
    transliterate();
  }
  else{
    console.log("transliteration is turned off")
  }
});

input.addEventListener('keyup',()=>{
  var ch = input.value;
  transRussian(ch);
  input.value = ch;
});

<input type="checkbox" id="checkbox">
<input type="text" id="input">

Answer 1

在这个解决方案中，如果翻译checkbox被点击，translateBlock()方法被调用并且<textarea>元素内的文本根据逻辑被改变。

/* 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>

如何使用普通 javascript 在拨动开关上执行或停止功能？

How to execute or stop a function on toggle switch using plain javascript?

javascript

checkbox

toggle

toggleswitch