Обе функции вызываются из document.ready:
$(document).ready(function () {
pnp.sp.web.lists.getByTitle("inReviewContracts").items.getAll().then (function(items) {
spContractList = items;
constructTable('#in-review-requests-table');
colorTable();
getNumVisibleContracts();
calculateTotalCost();
populateDashboardNumbers();
}).catch(function(items) {
console.log("Catch: ", items);
});
const dirMenuElement = document.querySelector('.dir-menu');
dirMenuElement.addEventListener('change', (event) => {
constructTable('#in-review-requests-table');
filterTable("");
});
});
Оба вызова constructTable () работают нормально. Вызов filterTable () вызывает ошибку «не функция». Обе функции определены за пределами document.ready. Ни один из них не использует указанное пространство имен. Это фактическая ошибка:
Uncaught TypeError: filterTable is not a function
at HTMLSelectElement.<anonymous> (scripts.js:49)
(аноним) @ scripts. js: 49
Снимок экрана с определениями функций:
![enter image description here](https://i.stack.imgur.com/QKTsD.png)
Почему я могу вызвать constructTable (), но не могу вызвать filterTable ()?
Определения функций:
function constructTable(selector) {
var list = getContractsFromLocalStorage();
if (!list) {
$(selector).addClass('no-data-text').html("No Data Available");
return;
}
// Get column names
var cols = getHeaderValues(list, selector);
// Traverse JSON data
for (var i = 0; i < list.length; i++) {
var row = $('<tr>');
for (var colIndex = 0; colIndex < cols.length-1; colIndex++)
{
var val = list[i][cols[colIndex]];
if (val) {
if (colIndex !== cols.length-2) {
switch (colIndex) {
case 0:
row.append($('<td><input type="checkbox" class="checkbox-col"></td>'))
row.append($('<td class="sca-number-col">').html(val + '</td></tr>'));
break;
case 1:
row.append($('<td class="contract-duration-col"/>').html(val + '</td></tr>'));
break;
case 2:
row.append($('<td class="requested-cost-col"/>').html(val + '</td></tr>'));
break;
case 3:
row.append($('<td class="total-cost-col"/>').html(val + '</td></tr>'));
break;
case 4:
row.append($('<td class="contract-term-col"/>').html(val + '</td></tr>'));
break;
case 5:
row.append($('<td class="scarb-review-col"/>').html(val + '</td></tr>'));
break;
case 6:
row.append($('<td class="region-scarb-review-col"/>').html(val + '</td></tr>'));
break;
case 7:
row.append($('<td class="status-col"/>').html(val + '</td></tr>'));
break;
}
} else {
$(selector).append(row);
$(selector).append($('<tr>' + '<td class="cont-desc-row">' + (val) + '</td>' + '</tr>'));
}
}
}
}
// use this to set the colspan attr with jquery b/c it cannot be done when building the table
$('td.cont-desc-row').attr('colspan', 9);
}
function filterTable(segName) {
var filter, activeTable, tr;
var dirFilter = document.getElementById("dir-menu").value.toUpperCase();
var officeFilter = document.getElementById("sca-menu-1").value.toUpperCase();
var activeTabID = $('.tab-link:not(.non-active-tab)').attr('id');
var activeTableID = activeTabID.replace('btn', 'table');
activeTable = document.getElementById(activeTableID);
tr = activeTable.getElementsByTagName("tr");
var yearFilter = document.getElementById("sca-menu-2").value.toUpperCase();
var filter3 = document.getElementById("sca-menu-3").value.toUpperCase();
var addFilter = document.getElementById("sca-menu-4").value.toUpperCase();
var scarbRevFilter = document.getElementById('scarb-review-menu-1').value.toUpperCase();
var contractFilter = document.getElementById('contract-term-menu-1').value.toUpperCase();
filterAll(activeTable, dirFilter, officeFilter, yearFilter, filter3, addFilter, scarbRevFilter, contractFilter, tr, segName);
colorTable(activeTable);
calculateTotalCost();
if (!segName) {
populateDashboardNumbers();
}
getNumVisibleContracts();
}