如何修复Javascript onclick调用？

我很难理解为什么我的onclick按钮不起作用。我的onclick按钮位于修改HTML的JS函数中

以下是包含onclick按钮的功能：

const bookmarkHTML = (bookmark) => {
    let html = '';
    if (bookmark.url.includes('https://') || bookmark.url.includes('http://')) {
        const li = `
            <li>
                <div class="row card-margin">
                    <div class="col s12 m12 card-padding">
                        <div class="card-panel teal card-size">
                            <img src='${'https://www.google.com/s2/favicons?domain_url=' + bookmark.url}' alt='icon' class='img-size'>
                            <a class='white-text' href='${bookmark.url}' target='_blank'>${bookmark.website}</a>
                            <button class='btn-flat waves-light btn-small right' onclick='switchCategory(bookmark)'><i class='material-icons left'>compare_arrows</i>switch</button>
                        </div>
                    </div>
                </div>
            </li>
        `;
        html += li;
    } else {
        const li = `
            <li>
                <div class="row card-margin">
                    <div class="col s12 m12 card-padding">
                        <div class="card-panel teal card-size">
                            <img src='${'https://www.google.com/s2/favicons?domain_url=' + bookmark.url}' alt='icon' class='img-size'>
                            <a class='white-text' href='${'https://' + bookmark.url}' target='_blank'>${bookmark.website}</a>
                            <button class='btn-flat waves-light btn-small right' onclick='switchCategory(bookmark)'><i class='material-icons left'>compare_arrows</i>switch</button>
                        </div>
                    </div>
                </div>
            </li>
        `;
        html += li;
    }
    console.log('HTML:', html);
    return html;
}

如果需要，下面是调用bookmarkHTML函数的函数：

const setupBookmarks = (data) => {
    let favoritesHTML = '';
    let bookmarksHTML = '';
    if (data.length) {
        data.forEach(doc => {
            const bookmark = doc.data();
            if (bookmark.favorite) {
                favoritesHTML += bookmarkHTML(bookmark);
            } else {
                bookmarksHTML += bookmarkHTML(bookmark);
            }
        })
    }
    favoriteList.innerHTML = favoritesHTML;
    bookmarkList.innerHTML = bookmarksHTML;
}

使用onclick单击按钮时，出现以下错误：

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

---

感谢您的帮助。

这似乎是因为当您在模板文本中传递对象时，该对象被转换为

[object object]

。解决方法可能是将该对象转换为string

switchCategory（${JSON.stringify（bookmark）}）

，但在您的情况下，它不会起作用，因为您稍后会对该对象进行变异。我认为增加可能是解决这个问题的办法

这似乎是因为当您在模板文本中传递对象时，

switchCategory（bookmark）

此对象被转换为

[object object]

。解决方法可能是将该对象转换为string

switchCategory（${JSON.stringify（bookmark）}）

，但在您的情况下，它不会起作用，因为您稍后会对该对象进行变异。我认为增加可能是解决这个问题的办法

看起来onclick处理程序是字符串“switchCategory（bookmark）”。将实际函数与参数一起使用？@NVRM您可以进一步解释吗？“我的回跳有什么不对？”贾拉契诺我刚试过，但没有改变任何东西。@NVRM这不是问题的一部分。由于某种原因，StackOverflow将语法突出显示搞砸了。在VSCode上，高亮显示正确显示，当我运行代码时，所有内容都会按应有的方式显示。不过onclick仍然不起作用。@NVRM在我最后一次评论之前，我确实试过了。这没有改变任何事情。我将用双引号保留它，但它并没有改变代码的任何操作。所有链接以前都有效，现在仍然有效。看起来onclick处理程序是字符串“switchCategory（bookmark）”。将实际函数与参数一起使用？@NVRM您可以进一步解释吗？“我的回跳有什么不对？”贾拉契诺我刚试过，但没有改变任何东西。@NVRM这不是问题的一部分。由于某种原因，StackOverflow将语法突出显示搞砸了。在VSCode上，高亮显示正确显示，当我运行代码时，所有内容都会按应有的方式显示。不过onclick仍然不起作用。@NVRM在我最后一次评论之前，我确实试过了。这没有改变任何事情。我将用双引号保留它，但它并没有改变代码的任何操作。所有的链接以前都有效，现在仍然有效。

const setupBookmarks = (data) => {
    let favoritesHTML = '';
    let bookmarksHTML = '';
    if (data.length) {
        data.forEach(doc => {
            const bookmark = doc.data();
            if (bookmark.favorite) {
                favoritesHTML += bookmarkHTML(bookmark);
            } else {
                bookmarksHTML += bookmarkHTML(bookmark);
            }
        })
    }
    favoriteList.innerHTML = favoritesHTML;
    bookmarkList.innerHTML = bookmarksHTML;
}