jeudi 26 septembre 2019

How to connect JS functions to checkbox

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> 



Aucun commentaire:

Enregistrer un commentaire