Javascript Uncought引用错误：未在HTMLButtonElement.onclick处定义showCurrentPage

和这匹母马在一起

我有一个功能，它为我的todo应用程序结果的每一页显示分页（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>`;
    }
}

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

index.html:1未捕获引用错误：未定义showCurrentPage 在HTMLButtonElement.onclick上（index.html:1）

只有在使用google closure编译器以高级模式编译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
    };
}

函数分页（）{
让listArray=new Array（）；//存储要排序的数据集合。
让pageList=new Array（）；//只跟踪要在当前页面上显示的项目
常数numberpage=3；
让currentPage=1；//跟踪分页中的位置
设numberOfPages=1；//计算总页数
const list=document.querySelector（'.url list'）；
让nextButton=document.getElementById（“下一步”）；
const previousButton=document.getElementById（“上一个”）；
让bookMarksArray=window.localStorage.getItem（'bookMarksArray'）？JSON.parse（window.localStorage.getItem（'bookMarksArray'））：[]；
//为存在的每个页面创建按钮
功能显示numberedbuttons（bookMarksArray）{
for（设x=0；x{
当前页面+=1；
分页计数逻辑（bookMarksArray）；
}
window.previousPage=（）=>{
当前页面-=1；
分页计数逻辑（bookMarksArray）；
}
返回{
显示NumberedButtons，
显示书签，
分页计数逻辑
};
}

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

在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) => {

---

请参阅：

这些代码片段的顺序是什么？也许您可以添加一个简单的JSFIDLE来重现这个问题（我没有添加代码笔，因为它有多个HTML页面…）下面是如何设置这些按钮而不使用难看的内联代码：（我还做了一些其他表面性的更改）这是一个多么神奇的解决方案！非常感谢！我也会读一读这个文件：p

window.showCurrentPage = (i) => {

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