dimanche 5 janvier 2020

addEventListener isn't updated after property change

i need to show an Alert Box after all checkboxes are unchecked. If User clicks on "Cancel" the last Checkbox should be "checked". If this Checkbox gets uncheck again, Alertbox should be shown.

So why "change" Listener doesn't get updated by this line

actionOnClose[1].checked = true;
import Swal from 'sweetalert2'

let checkboxes = document.querySelectorAll('input.orders-checkbox'),
    checkboxArray = Array.from(checkboxes),
    checkboxesAll = checkboxArray.length,
    checkboxCounter = 0,
    cancleOrderUrl = document.querySelector('input.confirm-cancel');

let alertBox = (data, routeTo, $form = null, ...actionOnClose) =>
{
    Swal.fire({
        // config code
        onClose: () => {
            switch (actionOnClose[0]) {
                case 'restoreCheckbox':
                    actionOnClose[1].checked = true;
                    break;

                default:
                    break;
            }
        }
    })
};

let observeCheckbox = (event) =>
{
    let self = event.target;

    if (!self.checked) {
        checkboxCounter++;
    }

    if (self.checked) {
        checkboxCounter--;
    }

    if (checkboxCounter === checkboxesAll) {
        alertBox('orders_cancel', cancleOrderUrl.getAttribute('data-route'), null, 'restoreCheckbox', self);
    }
};

checkboxArray.forEach(function (checkbox)
{
    checkbox.addEventListener('change', event => observeCheckbox(event), true);
});
<input type="checkbox" name="line_items[]" id="7858" value="7858" class="orders-checkbox" checked="checked">

<input type="checkbox" name="line_items[]" id="7859" value="7859" class="orders-checkbox" checked="checked">

<input type="checkbox" name="line_items[]" id="7860" value="7860" class="orders-checkbox" checked="checked">




Aucun commentaire:

Enregistrer un commentaire