未捕获的类型错误：无法在清除筛选器上读取 .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添加到null值。使用document.getElementById('')时，如果找不到元素，则返回null。因为您没有检查是否找到了元素，所以.addEventListener尝试附加到一个null值，因此会抛出错误。

查看您的代码，有三个区域没有html元素(来自问题中包含的内容(HTML中没有filter-clear、add-row或del-row元素。根据您在document.getElementById('filter-clear').addEventListener()上面看到的错误，您的filter-clear元素似乎不存在。

下面是一个捕获错误并将错误附加到正文的示例。https://jsfiddle.net/nrayburn/58he2jr6/6/