时间戳

首页 > 解决方案 > 如何修复 Javascript onclick 调用？

javascript - 如何修复 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;
}

这是 onclick 中调用的函数：

switchCategory = (bookmark) => {
    if (bookmark.favorite) {
        bookmark.favorite = false;
    } else {
        bookmark.favorite = true;
    }
}

如果需要，这里是调用 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 的按钮时，出现此错误：

未捕获的 ReferenceError：书签未在 HTMLButtonElement.onclick (index.html:1) 中定义

谢谢你的帮助。

标签： javascripthtmlfirebase

解决方案

似乎正在发生这种情况，因为当您在模板文字中传递一个对象时，switchCategory(bookmark)该对象被转换为[object Object]. 一种解决方法可能是将该对象转换为字符串switchCategory(${JSON.stringify(bookmark)})，但在您的情况下它不会完成这项工作，因为您稍后会改变该对象。我认为添加EventListener可能是解决此问题的方法。我也发现了类似的问题，所以你可以得到更多的信息，也许是一个更好的解决方案。

推荐阅读