onchange function for switchery elements

Question

When I am using the function initSwitchery2, I am not being able to change the text for .js-check-change-field-7 for onchange event when .js-switch-7 is checked.

$(document).ready(function() {
    handleSwitcheryElements();
});


function initSwitchery2($class, $color, $speed, $size, $secondarycolor, $class2) {
    var elems = Array.prototype.slice.call(document.querySelectorAll($class));
    var changeFields = Array.prototype.slice.call(document.querySelectorAll($class2));
        elems.forEach(function(el) {
                if ($(el).data('switchery') != true) {
                    new Switchery(el,  { color: $color, speed: $speed, size: $size, secondaryColor: $secondarycolor });
                }
            });
        elems.onchange = function() {
                if ($($class).is(':checked')) {
                    changeFields.innerText = "Afficher";
                    $($class2).removeClass("btn-danger").addClass("btn-success");
                } else {
                    changeFields.innerText = "Masquer";
                    $($class2).removeClass("btn-success").addClass("btn-danger");
                }
            };
        }


handleSwitcheryElements = function() {
    initSwitchery2('.js-switch-7', '#00ACAC', '0.3s', 'small', '#ff5b57', '.js-check-change-field-7');
};


--html--

<input type="checkbox" data-render="switchery" data-theme="blue" class="js-switch-7 text-right" data-change="check-switchery-state-text" />
<a href="#" class="btn btn-xs btn-danger disabled m-l-5 js-check-change-field-7" data-id="switchery-state-text">Masquer</a>

Answer 1

you have to use native .addEventListener / or .on using jquery

So instead of

elems.onchange = function() {
    .....
}

Use with Js the first element

elems[0].onchange = function() {
    //code stuff
}

Or using jquery by Setting your event as bellow :

 $(elems).on("change" , function() {

      //code stuff
 });

If you want to apply this last to all your check boxes :

add a unique id for each of your a element and add this last as a data attribute for your input

example for a -> id="a1" its input -> data-id-target="a1" and so on .

Bellow a working example :

$(document).ready(function() {
    handleSwitcheryElements();
});


function initSwitchery2($class, $color, $speed, $size, $secondarycolor) {
    var elems = Array.prototype.slice.call(document.querySelectorAll($class));
    
        elems.forEach(function(el) {
                if ($(el).data('switchery') != true) {
                    
                    new Switchery(el,  { color: $color, speed: $speed, size: $size, secondaryColor: $secondarycolor });
                    
                    el.onchange = function(e) {
                      if ($(this).is(':checked')) {
                          $("#"+$(this).data("id-target")).html("Afficher");
                          $("#"+$(this).data("id-target")).removeClass("btn-danger").addClass("btn-success");
                      } else {
                          $("#"+$(this).data("id-target")).html("Masquer");
                          $("#"+$(this).data("id-target")).removeClass("btn-success").addClass("btn-danger");
                      }
                    }
                   
                }
            });
        }


handleSwitcheryElements = function() {
    initSwitchery2('.js-switch-7', '#00ACAC', '0.3s', 'small', '#ff5b57');
    
};

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.js"></script>
<div>
<input type="checkbox" data-render="switchery" data-theme="blue" class="js-switch-7 text-right" data-change="check-switchery-state-text" data-id-target="a1" />
<a href="#" class="btn btn-xs btn-danger disabled m-l-5 js-check-change-field-7" data-id="switchery-state-text" id="a1">Masquer</a>
</div>
<div>
<input type="checkbox" data-render="switchery" data-theme="blue" class="js-switch-7 text-right" data-change="check-switchery-state-text" data-id-target="a2" />
<a href="#" class="btn btn-xs btn-danger disabled m-l-5 js-check-change-field-7" data-id="switchery-state-text" id="a2">Masquer</a>
</div>
<div>
<input type="checkbox" data-render="switchery" data-theme="blue" class="js-switch-7 text-right" data-change="check-switchery-state-text" data-id-target="a3" />
<a href="#" class="btn btn-xs btn-danger disabled m-l-5 js-check-change-field-7" data-id="switchery-state-text" id="a3">Masquer</a>
</div>
<div>
<input type="checkbox" data-render="switchery" data-theme="blue" class="js-switch-7 text-right" data-change="check-switchery-state-text" data-id-target="a4" />
<a href="#" class="btn btn-xs btn-danger disabled m-l-5 js-check-change-field-7" data-id="switchery-state-text" id="a4">Masquer</a>
</div>