jeudi 26 septembre 2019

How to make checkbox control my Javascript Functions?

Hello people,

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. Sometimes I'd like to only use the scramble function (without the capitalize function) and the other way around.

I am trying to add a eventlistener to the checkboxes, but for some reason it does not work.

Right now, the checkbox_2 does enable myScrambleFunction and enabling myConvertFunction (checkbox_1) kinda works like the convert button that does not work anymore. I just want my checkboxes to "enable" myConvertFunction and myScrambleFunction.

JSfiddle: https://jsfiddle.net/MysteriousDuck/zue583gq/3/

I have tried googling my problem and couldn't find a solution.

//Checkbox checked checker. 
var checkbox = document.querySelector("#checkbox_1");

checkbox_1.addEventListener( 'change', function() {
    if(this.checked) {
        myConvertFunction(document.getElementById("inputText").value);
    } else {
        //Do nothing
    }
});

var checkbox = document.querySelector("#checkbox_2");

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


        <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