未捕获的 ReferenceError：showCurrentPage 未在 HTMLButtonElement.onclick 中定义

Question

Having a mare with this one...

I have a function, which displays pagination ( 1, 2, 3 etc) buttons, for each page of my todo app results.

Specifically for example, if you click on button 2, you'll see page 2 of the results. Here's the full function and the buttons are being inserted via template literals:

// 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>`;
    }
}

However, my onclick function, does not seem to register in my JavaScript:

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

If I click on any button, I get the following error. And I have no idea why, as I can see the buttons in my DOM.

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

This only happens when I compiled my JS files in advanced mode, using google closure compiler. Otherwise, this works fine if the files are not compiled.

Not sure how to resolve this.

Here is the full order the code appears as in my script:

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

The cause is probably that the compiler doesn't see the function being called. Part of the advanced compilation is removing unused code and renaming the methods/variables.

Within your js or html it is never called because the function call is only defined in a string value here :

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

you can solve this pretty simply by rewriting this:

window.showCurrentPage = (i) => {

to this:

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

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