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

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

在您的 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

Uncaught ReferenceError: showCurrentPage is not defined at HTMLButtonElement.onclick

Uncaught ReferenceError: showCurrentPage is not defined at HTMLButtonElement.onclick

javascript

dom

function

undefined

google-closure-compiler