时间戳

首页 > 解决方案 > 如何将 JS 函数连接到复选框

javascript - 如何将 JS 函数连接到复选框

问题描述

你好，

我正在制作一个简单的文本转换器网站，我希望用户能够选择要使用的选项。现在我有两个选择；myConvertOption 将单词中的每个奇数字母大写，而我有 myScrambleOption 随机混合每个单词。

现在，每当您单击 Caps (checkbox_1) 时，它已经执行了我只希望它在用户单击“转换”按钮时执行的功能 + 它现在还在每个字母之间放置空格。Scramble 按钮 (checkbox_2) 出于某种原因不执行任何操作，除了控制台记录更改。

JSfiddle：https ://jsfiddle.net/MysteriousDuck/hLjytr2p/1/

任何帮助和建议将不胜感激！

PS我是Javascript新手。

复选框事件监听器：

checkbox_1.addEventListener('change', function () {
    console.log("checkbox_1 changed");
    if (this.checked) {
        myConvertFunction();
    } else {
        //Do nothing
    }
})

checkbox_2.addEventListener('change', function () {
    console.log("checkbox_2 changed");
    if (this.checked) {
        myScrambleFunction(text);
    } else {
        //Do nothing
    }
})

复选框 HTML：

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

标签： javascripthtmlfunctioncheckbox

解决方案

这可以正常工作..
您只需在按钮上添加事件，然后测试选中了哪个复选框，以及其他一些小事

<!doctype html>
<html>

<head>

</head>

<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" id="convertText">Convert</button>
    <textarea type="text" placeholder="converted text" id="convertedText" value="Clear" readonly="true" spellcheck="false" style="width: 300px;"></textarea>
    <button class="button button1" id="copyText">Copy</button>

  </div>

  <script>
    var text = document.getElementById("inputText").value;
    var convertText = document.getElementById("convertText");
    var checkbox_2 = document.getElementById("checkbox_2");
    var checkbox_1 = document.getElementById("checkbox_1");

    //Capitalize every odd letter
    function myConvertFunction() {
      var x = document.getElementById("inputText").value;
      var string = "";
      for (let i = 0; i < x.length; i++) {
        if (i % 2 == 0) {
          string = string + x[i].toUpperCase();
        } else {
          string = string + x[i];;
        }
      }
      return string;
    }

    //Scramble words
    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(' ');
    }

    document.getElementById("copyText").addEventListener("click", myCopyFunction);

    //Copy textarea output
    function myCopyFunction() {
      var copyText = document.getElementById("convertedText");
      copyText.select();
      document.execCommand("copy");
      alert("Copied the text: " + copyText.value);
      eraseText();
    }

    //Delete textarea output
    function eraseText() {
      document.getElementById("convertedText").value = "";
      document.getElementById("inputText").value = "";
      document.getElementById("inputText").focus();
    }


    //don't add the event to the radio buttons (previously checkboxes), add it to the convert button, and in its function test which radio button has been checked
    convertText.addEventListener('click', function() {
      if (checkbox_1.checked && checkbox_2.checked) {
        console.log("doing both options");
        document.getElementById("convertedText").value = myScrambleFunction(myConvertFunction());
      } else if (checkbox_2.checked) {
        console.log("proceeding scrumble");
        document.getElementById("convertedText").value = myScrambleFunction(text);
      } else if (checkbox_1.checked) {
        console.log("proceeding cap");
        document.getElementById("convertedText").value = myConvertFunction();
      }
    })
  </script>


</body>

</html>

推荐阅读