javascript - Uncaught ReferenceError : showCurrentPage is not defined at HTMLButtonElement. onclick

Question

和这匹母马在一起......

我有一个函数，可以为我的待办事项应用结果的每一页显示分页(1、2、3 等)按钮。

例如，如果您单击按钮 2，您将看到结果的第 2 页。这是完整的功能，按钮是通过模板文字插入的:

// CREATE BUTTONS FOR EACH PAGE THAT EXISTS
function displayNumberedButtons(bookMarksArray) {
    for (let x = 0; x < bookMarksArray.length; x++)
    listArray.push(x);

    numberOfPages = Math.ceil(listArray.length / numberPerPage);

    let individualPagesArray = [];
    for (var i = 1; i <= numberOfPages; i++) {
        individualPagesArray.push(i);
    }

    // BUTTONS ARE ADDED HERE
    for (var i = 0; i < individualPagesArray.length; i++) {
        document.getElementById("numbers").innerHTML += `<button onclick=showCurrentPage(${i+1})>` + individualPagesArray[i] + `</button>`;
    }
}

但是，我的 onclick 函数似乎没有在我的 JavaScript 中注册:

// PAGINGATION CTAS
window.showCurrentPage = (i) => {
    currentPage = i;
    paginationCountLogic(bookMarksArray);
}

如果我点击任何按钮，我会收到以下错误。我不知道为什么，因为我可以在 DOM 中看到按钮。

index.html:1 Uncaught ReferenceError: showCurrentPage is not defined at HTMLButtonElement.onclick (index.html:1)

只有当我使用 google 闭包编译器以高级模式编译 JS 文件时才会发生这种情况。否则，如果文件未编译，则此方法可以正常工作。

不知道如何解决这个问题。

这是代码在我的脚本中显示的完整顺序:

function Pagination() {
    let listArray         = new Array(); //store the collection of data to be sorted.
    let pageList          = new Array();  //keep track of the items to display on the current page only
    const numberPerPage   = 3;
    let currentPage       = 1;  //keep track of where we are in the pagination
    let numberOfPages     = 1;   // calculates the total number of pages
    const list            = document.querySelector('.url-list');
    let nextButton        = document.getElementById("next");
    const previousButton  = document.getElementById("previous");

    let bookMarksArray = window.localStorage.getItem('bookMarksArray') ? JSON.parse(window.localStorage.getItem('bookMarksArray')) : [];

    // CREATE BUTTONS FOR EACH PAGE THAT EXISTS
    function displayNumberedButtons(bookMarksArray) {
        for (let x = 0; x < bookMarksArray.length; x++)
        listArray.push(x);

        numberOfPages = Math.ceil(listArray.length / numberPerPage);

        let individualPagesArray = [];
        for (var i = 1; i <= numberOfPages; i++) {
            individualPagesArray.push(i);
        }

        for (var i = 0; i < individualPagesArray.length; i++) {
            document.getElementById("numbers").innerHTML += `<button id="${i+1}" onclick=showCurrentPage(${i+1})>` + individualPagesArray[i] + `</button>`;
        }
    }

    // CALCULATE WHEN PAGINATION SHOULD BEGIN AND STOP
    function paginationCountLogic(bookMarksArray) {
        let begin = ((currentPage - 1) * numberPerPage);
        let end = begin + numberPerPage;
        pageList = bookMarksArray.slice(begin, end);

        nextButton.disabled = currentPage === numberOfPages ? true : false;
        previousButton.disabled = currentPage === 1 ? true : false;
        displayBookmarks(pageList);
    }

    // DISPLAY BOOKMARKS
    function displayBookmarks(pageList) {
        list.innerHTML = "";
        for (let r = 0; r < pageList.length; r++) {
            list.innerHTML +=
            `<div>
                <form class="text animated slideInDown bookmarksForm" id=${pageList[r].name}>
                    <input class="nameItem" type="text" name="name" value=${pageList[r].name} id="name" placeholder="Name">
                    <input class="urlItem" type="url" name="url" value=${pageList[r].url} id="url" placeholder="https://example.com">
                    <button type="button" class="js-edit-url" id="edit">edit</button>
                    <button type="button" class="js-delete-url" id="delete">delete</button>
                </form>
            </div>`;
        }
    }

    // PAGINGATION CTAS
    window.showCurrentPage = (i) => {
        currentPage = i;
        paginationCountLogic(bookMarksArray);
    }

    window.nextPage = () => {
        currentPage += 1;
        paginationCountLogic(bookMarksArray);
    }

    window.previousPage = () => {
        currentPage -= 1;
        paginationCountLogic(bookMarksArray);
    }

    return {
      displayNumberedButtons,
      displayBookmarks,
      paginationCountLogic
    };
}

Answer 1

原因可能是编译器没有看到正在调用的函数。高级编译的一部分是删除未使用的代码并重命名方法/变量。

在您的 js 或 html 中，它永远不会被调用，因为函数调用仅在此处的字符串值中定义:

for (var i = 0; i < individualPagesArray.length; i++) {
   document.getElementById("numbers").innerHTML += `<button onclick=showCurrentPage(${i+1})>` + individualPagesArray[i] + `</button>`;
}

你可以通过重写以下内容来解决这个问题:

window.showCurrentPage = (i) => {

对此:

window['showCurrentPage'] = (i) => {

参见:https://developers.google.com/closure/compiler/docs/api-tutorial3#removal