Pagination and filtering collision; [TypeError: Illegal invocation] ; AJAX Object properties randomly becoming inputEvent objects instead of numbers

Question

I'm trying to add pagination to my PHP web store page. It should trigger on click, forward it's parameter to a function that is also used as a value checker for all the filters (search, category ddl, sort ddl, subcategory checkboxes) before creating a AJAX request towards my filters.php file that communicates with the DB and responds with the query result.

Filtering is functioning normally without adding the pagination part and vice-versa. When combined, pagination works but out of all filters only the category one works. Others are triggering a error:

[caught TypeError: Illegal invocation];

I've tried console logging the data object right before AJAX request, to see what are the values and im 100% sure that the issue is that the 'limit' (pagination) property is getting some random inputEvent / changeEvent object value instead of being null when pagination isn't triggered. This happens on filters event triggering, like it's somehow passing the value to limit as it's sibling property. limit value should be number type, like it is when the function is triggered by pagination buttons.

This is the function that's causing problems.

function filterChange(limit = null){
    //limit paginacije
    let limitPaginacije = limit != null ? limit : 0;
    
    //search
    let search = document.querySelector("#search").value;
    
    //category ddl
    let category_id = $('#category option:selected').attr('data-category-id');

    //type cb
    let subcategory_ids = [];
    document.querySelectorAll("input[type='checkbox']").forEach((cb)=>{
        if(cb.checked)
        {
            subcategory_ids.push(cb.getAttribute("data-type-id"));
        }
    })

    //sort ddl
    let sort = $("#sort").val();

    let data = {
        search: search,
        category_id : category_id,
        subcategory_ids : subcategory_ids,
        sort : sort,
        limit: limit
    }
    /*
    if (typeof data.limit !== 'number') {
        data.limit = null;
    }
    */
    console.log(data);
    //ajax request
    $.ajax({
        url:"/php_sajt/pages/logic/filters.php",
        method: "post",
        data: data,
        success: (data) =>{
            //prikaz proizvoda
            $("#product-container").html(data);
            //ponovno dodavanje eventova
            paginationButtonsEventAdd();
        },
        error: (xhr) => {
            ajaxError(xhr);
        }
    })
}

This what pagination button looks like

<li class='page-item'>
 <a class='pgn page-link active rounded-0 mr-3 shadow-sm border-top-0 border-left-0' href='#' data-limit='1'>1</a>
</li>

Thank you in advance.

Answer 1

I've fixed the issue.

The problem was that the non-required 'limit' parameter, when not set upon function call, was getting passed 'eventObject' as value because some other filter event got triggered and also called the same function.

Since the problem was in that 'non-required' parameter, I decided to remove it. I made a global scope variable and changed it's value upon pagination button click event, instead of passing it to the function as a argument.

Thus, there was no other event that would interfere with my 'limit' variable.