未捕获类型错误。在清除过滤器时无法读取.net中null的属性'addEventListener'。

Question

I'm using Tabulator to implement search

Here's my html -- no problems until I try to search, then, I receive the above-captioned error:


<div>
    <select id="filter-field">
        <option></option>

        <option value="custId">Customer ID</option>
        <option value="custType">Customer Type</option>
        <option value="custName">Customer Name</option>
        <option value="groupId">Group ID</option>

    </select>

    <select id="filter-type">
        <option value="=">=</option>
        <option value="<"><</option>
        <option value="<="><=</option>
        <option value=">">></option>
        <option value=">=">>=</option>
        <option value="!=">!=</option>
        <option value="like">like</option>
    </select>

    <input id="filter-value" type="text" placeholder="value to filter">
</div>

<div id="example-table"></div>

   I'm receiving an error in the JavaScript:
            ````<script>



        var table;


        function handleCellUpdated(cell) {
            console.log(cell);
            console.log(cell.getRow());
            console.log(cell.getRow().getData());
            var record = cell.getRow().getData();

            $.ajax({
                url: "api/SalesTrackerCustomers/" + record.id,
                data: JSON.stringify(record),
                contentType: 'application/json',
                type: "PUT",
                success: function (response, textStatus, xhr) {
                    console.log("success")
                },
                error: function (XMLHttpRequest, textStatus, error) {
                    console.log("error")
                }
            });

        }


        function initTable() {

            //Build Tabulator
            table = new Tabulator("#customers", {
                height: "90vh",
                placeholder: "Loading...",
                addRowPos: "bottom",
                columns: [
                    { title: "Customer ID", field: "custId", width: 150, editor: "input" },
                    { title: "Customer Type", field: "custType", width: 130, editor: "input" },
                    { title: "Customer Name", field: "customerName", editor: "input" },
                    { title: "Group ID", field: "groupId", editor: "number" }
                ],
                cellEdited: handleCellUpdated
            });

            loadCustomers();
        }



        function loadCustomers() {
            console.log("loading data");
            $.ajax({
                url: "/api/SalesTrackerCustomers",
                method: "GET"
            }).done(function (result) {

                table.setData(result);




            });
        }
        // javascript for add/delete
        //Add row on "Add Row" button click
        document.getElementById("add-row").addEventListener("click", function () {
            table.addRow({});
        });

        //Delete row on "Delete Row" button click
        document.getElementById("del-row").addEventListener("click", function () {
            table.deleteRow(1);
        });

        // javascript for search

        //Define variables for input elements
        var fieldEl = document.getElementById("filter-field");
        var typeEl = document.getElementById("filter-type");
        var valueEl = document.getElementById("filter-value");

        //Custom filter example
        function customFilter(data) {
            return data.car && data.rating < 3;
        }

        //Trigger setFilter function with correct parameters
        function updateFilter() {
            var filterVal = fieldEl.options[fieldEl.selectedIndex].value;
            var typeVal = typeEl.options[typeEl.selectedIndex].value;

            var filter = filterVal == "function" ? customFilter : filterVal;

            if (filterVal == "function") {
                typeEl.disabled = true;
                valueEl.disabled = true;
            } else {
                typeEl.disabled = false;
                valueEl.disabled = false;
            }

            if (filterVal) {
                table.setFilter(filter, typeVal, valueEl.value);
            }
        }

        //Update filters on value change
        document.getElementById("filter-field").addEventListener("change", updateFilter);
        document.getElementById("filter-type").addEventListener("change", updateFilter);
        document.getElementById("filter-value").addEventListener("keyup", updateFilter);

        //Clear filters on "Clear Filters" button click
        document.getElementById("filter-clear").addEventListener("click", function () {
            fieldEl.value = "";
            typeEl.value = "=";
            valueEl.value = "";

            table.clearFilter();
        });

谁能补充一下对这个错误的见解？我已经尝试移动JavaScript，我认为它可能与JavaScript的位置有关。它是显示在/清除过滤器上的 "清除过滤器 "按钮点击上面的标题错误;它也可能是在表格上的加载制表器javascript功能。

Answer 1

你收到的错误是因为你试图添加一个 eventListener 为空值。 当使用 document.getElementById('')如果没有找到一个元素，就返回null。 因为你没有检查是否找到了一个元素，所以你的 .addEventListener 试图附加到一个空值，所以抛出错误。

看你的代码，有三个地方没有html元素（从问题中包含的内容来看）没有一个 filter-clear, add-row或 del-row 元素。 基于您看到了上面的错误 document.getElementById('filter-clear').addEventListener()，它看起来像你的 filter-clear 元素不存在。

下面是一个例子，它可以捕捉到错误并将错误附加到正文中。https:/jsfiddle.netnrayburn58he2jr66