How to connect JS functions to checkbox

Question

Hello,

I am making a simple text changer website where I want the user to be able to select what options to use. Right now I have two options; myConvertOption which capitalizes every odd letter in a word and I have myScrambleOption which randomly mixes up each word a bit.

Right now whenever you click on Caps (checkbox_1) it already executes the function where I only want it to execute whenever the user clicks on the "Convert" button + it also puts spaces in between each letter now. The Scramble button (checkbox_2) doesn't do anything for some reason, except for console logging the change.

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

Any help and suggestions will be greatly appreciated!

P.S I am new to Javascript.

Checkbox event listeners:

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

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

Can you share with us the code of the functions: myScrambleFunction() and myConvertFunction()? — Hamza Dahmoun
– Hamza Dahmoun, Commented Sep 26, 2019 at 12:51
They're in the JSfiddle: jsfiddle.net/MysteriousDuck/hLjytr2p/1 — Buster
– Buster, Commented Sep 26, 2019 at 12:52
your text var gets set when the page loads and then is never updated, is that what you want? — JDunken
– JDunken, Commented Sep 26, 2019 at 13:11
I really don't know. I just want to know how to make work what I described above :\ — Buster
– Buster, Commented Sep 26, 2019 at 13:13

Hamza Dahmoun · Accepted Answer · 2019-09-26 13:42:16Z

this works properly..
You just had to add the event on the button and then test which check box was checked, and other little things

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

Thank you so much. I have been trying for about 5 hrs to get this to work. I really appreciate it!!
One more thing: For some reason I can't only scramble the text, can you see why that is the case? jsfiddle.net/MysteriousDuck/osg4xz9r/2. It does show up in the console as Scrambling
nvm, I fixed it by putting var text = document.getElementById("inputText").value; above ` document.getElementById("convertedText").value = myScrambleFunction(text);`

JDunken · Accepted Answer · 2019-09-26 13:14:50Z

0

You're never updating var text.

You need to update it before using it if you want the value to be something other than an empty string.

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

answered Sep 26, 2019 at 13:14

JDunken

4632 silver badges7 bronze badges

2 Comments

Buster Over a year ago

I put text = document.getElementById("inputText").value; in both my checkbox eventlisteners but it didn't change anything..

JDunken Over a year ago

if you want to split on spaces let words = text.split("") won't do that, it needs to be let words = text.split(" ")

Collectives™ on Stack Overflow

How to connect JS functions to checkbox

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related