如何使用复选框启用/禁用 javascript 功能？

Question

Hello stackoverflow,你好堆栈溢出，

How would I make it possible to (temporarily) disable/enable javascript functions for a with a checkbox.我如何才能（暂时）禁用/启用带有复选框的 javascript 功能。

I want to be able to check a box enabling only one, or both of the functions (including the myScrambleFunction and myConvertFunction) the myConvertFunction capitalizes every odd letter, and the myScrambleFunction scrambles up each word a bit.我希望能够选中一个仅启用一个或两个功能（包括 myScrambleFunction 和 myConvertFunction）的框，myConvertFunction 将每个奇数字母大写，而 myScrambleFunction 将每个单词打乱一点。 Sometimes I'd like to only use the scramble function (without the capitalize function) and the other way around.有时我只想使用打乱 function （没有大写功能），反之亦然。

Any suggestions and examples will be greatly appreciated:)任何建议和示例将不胜感激:)

This: https://jsfiddle.net/MysteriousDuck/3pndLbgq/3/ is what I have right now.这个： https://jsfiddle.net/MysteriousDuck/3pndLbgq/3/是我现在所拥有的。

I have tried googling this problem but could not find a solution that suits my needs.我试过用谷歌搜索这个问题，但找不到适合我需要的解决方案。

 function myConvertFunction() { var x = document.getElementById("inputText").value; var letters = x.split(""); var string = ""; for (i = 0; i < letters.length; i++) { if (i % 2 == 0) { string += letters[i].toUpperCase(); } else { string += letters[i]; } } document.getElementById("converted").value = myScrambleFunction(string); } function myCopyFunction() { var copyText = document.getElementById("converted"); copyText.select(); document.execCommand("copy"); alert("Copied the text: " + copyText.value); eraseText(); } function eraseText() { document.getElementById("converted").value = ""; document.getElementById("inputText").value = ""; document.getElementById("inputText").focus(); } function myScrambleFunction(text) { let words = text.split(" "); words = words.map(word => { if (word.length >= 3) { return word.split('').sort(() => 0.7 - Math.random()).join(''); } return word; }); return words.join(' '); }

 <body> <div class="container"> <h1> Text Changer </h1> <h2> CAPS + randomize letters text changer</h2> <div class="checkbox"> <input type="checkbox" id="checkbox_1"> <label for="checkbox_1">Caps</label> </div> <div class="checkbox"> <input type="checkbox" id="checkbox_2"> <label for="checkbox_2">Scramble</label> </div> <textarea type="text" autofocus="true" placeholder="input text" id="inputText" value="Input Value" spellcheck="false" style="width: 300px;"></textarea> <button class="button button1" onclick="myConvertFunction(); myScrambleFunction(text);">Convert</button> <textarea type="text" placeholder="CoNvErTeD tExT" id="converted" value="Clear" readonly="true" spellcheck="false" style="width: 300px;"></textarea> <button class="button button1" onclick="myCopyFunction(); eraseText();">Copy</button> </div> </body>

Answer 1

You need to create another function to check the checkbox state:您需要创建另一个 function 以选中复选框 state：

var button1Handler = function(e) {
  var checked1 = document.getElementById("checkbox_1").checked,
      checked2 = document.getElementById("checkbox_2").checked;

  if (checked1) myConvertFunction(); 
  if (checked2) myScrambleFunction(text);
}

如何使用复选框启用/禁用 javascript 功能？

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-09-25 18:53:28

如何使用复选框启用/禁用 javascript 功能？

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-09-25 18:53:28

解决方案1
0 已采纳 2019-09-25 18:53:28